angularjs – 当您离开标签视图或最小化Ionic App时,如何暂停或停止iframe YouTube视频

前端之家收集整理的这篇文章主要介绍了angularjs – 当您离开标签视图或最小化Ionic App时,如何暂停或停止iframe YouTube视频前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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中了解如何在您可能没有看到应用程序的每个场景中调用函数,因此要将应用程序关闭后台,转到新选项卡,请按返回按钮…是否有我可以添加这个函数调用所有这些场景吗?

解决方法

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",'*');
  }
}

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

猜你在找的Angularjs相关文章