如何在离开标签视图或最小化Ionic App时暂停或停止iframe YouTube视频

Question

我有一个Ionic App,我想部署到Android Play商店,我的应用程序只有1个标签上有一个视频列表,然后当你点击1个视频时它然后使用像这样的iframe在另一个标签中播放视频

<div class="video-container">
    <iframe id="VideoPlayer" ng-src="{{getIframeSrc(videoid)}}" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

一切正常.问题是由于YoutubeAPI Google Play商店政策,您不允许您的应用在后台播放YouTube视频或音频,例如当您最小化应用或转移到其他标签时.

实现这一目标的最佳方法是什么？我需要确保当你最小化或移动到另一个标签时,如果用户没有自己停止,它将阻止youtube视频从iframe播放.

*******UPDATE********

我现在可以通过使用按钮调用此功能来停止视频

$scope.stopVideo = function() {

 var iframe = document.getElementsByTagName("iframe")[0].contentWindow;

   iframe.postMessage('{"event":"command","func":"' + 'stopVideo' +   '","args":""}', '*');
}

但是这只有在我使用Ionic Serve进行测试时才有效,如果我在Android手机上运行相同的代码,我会得到参考错误:Div Not Defined.不知道为什么这会在浏览器中运行,但在Android上运行时不会在应用程序上运行.

我还需要在Ionic中了解如何在您可能没有看到应用程序的每个场景中调用此函数,因此要将应用程序关闭到后台,转到新选项卡,请按返回按钮...是否有我可以添加这个函数来调用所有这些场景吗？

Answer 1

Ionic2的解决方案,使用TypeScript

ionViewWillLeave() {
   let listaFrames = document.getElementsByTagName("iframe");

   for (var index = 0; index < listaFrames.length; index++) {
    let iframe = listaFrames[index].contentWindow;
    iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  }
}

不要忘记在视频链接的末尾启用JS*？enablejsapi = 1