离开标签视图或最小化 Ionic 应用程序时如何暂停或停止 iframe youtube 视频答案

【问题标题】：How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App离开标签视图或最小化 Ionic 应用程序时如何暂停或停止 iframe youtube 视频
【发布时间】：2015-08-16 03:51:17
【问题描述】：

我有一个要部署到 android play 商店的 Ionic 应用程序，我的应用程序在 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 视频或音频，例如当您最小化您的应用或移动到另一个选项卡时。p>

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

********更新********

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

$scope.stopVideo = function() {

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

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

但是，这仅在我使用 Ionic Serve 进行测试时才有效，如果我在 Android 手机上运行相同的代码，我会收到参考错误：未定义 Div。不知道为什么这会在浏览器中工作，但在 Android 中运行时却不能在应用程序上工作。

我还需要在 Ionic 中了解如何在您可能没有查看应用程序的每个场景中调用此函数，因此要将应用程序关闭到后台，转到新选项卡，按后退按钮...有没有办法添加这个函数来为所有这些场景调用？

【问题讨论】：

使用 youtube JS API 你有一个叫做Playback controls and player settings的东西，它给你一些功能来控制你的视频。如player.pauseVideo():Void 暂停当前播放的视频。都在这里developers.google.com/youtube/iframe_api_reference
嗨，Jeffery，感谢您的 cmets，您知道如何将其放入我的 ionic 应用程序中吗？例如，当应用程序被最小化或您转到另一个选项卡时，按下后退按钮然后触发您提到的 JS API？
我已经发布了类似的答案here。看看有没有用。

标签： angularjs youtube-api ionic-framework ionic

【解决方案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

【讨论】：

有更多代表，you will be able to flag duplicate questions like this。在那之前，对多个问题发布相同的答案并不是很理想。或者，如果问题不是重复的，为这个特定问题量身定制答案。
@Rogerio 这对 ionic2 和 3 也很有帮助

【解决方案2】：

总而言之，使用$ionicView，您可以在导航到其他视图时防止您的网络被 Youtube XHR 请求（以块的形式出现）弄乱，如下所示：

        $scope.pauseVideo = function() {
            var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
           iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' +   '","args":""}', '*');
        }


        $scope.playVideo = function() {
            var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
           iframe.postMessage('{"event":"command","func":"' + 'playVideo' +   '","args":""}', '*');
        }


        $scope.$on('$ionicView.beforeLeave', function(){
            $scope.pauseVideo();
        });

        $scope.$on('$ionicView.enter', function(){
            $scope.playVideo();
        });

如果您希望在导航回包含视频的视图时从头开始播放视频，您当然可以使用 stopVideo() 而不是 pauseVideo()。

【讨论】：

这非常有效。要启用 js api，请将 ?enablejsapi=1 放在嵌入视频的末尾。示例：http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1

【解决方案3】：

我设法使用上述 youtube 方法并在 cordova 框架中的 Pause 事件和 $ionicView.beforeLeave 事件中完成此工作。

【讨论】：

这就是我的建议

【解决方案4】：

我使用了@Rogerio 代码并且必须实现/添加以下内容，以防应用程序在后台运行。

import { Platform } from 'ionic-angular';

@Component({
  template: `OK`
})

constructor(public platform: Platform) {

platform.ready().then(() => {

  if (platform.is('cordova')){

    //Subscribe on pause
    this.platform.pause.subscribe(() => {
      //Hello pause
    });

    //Subscribe on resume
    this.platform.resume.subscribe(() => {
      window['paused'] = 0;
    });
   }
});

}
//@Rogero mentioned this code
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":""}', '*');
  }
}

【讨论】：