Question

我有一个Ionic App，我想部署到Android Play商店，我的应用程序只有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

Answer 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（）。

Answer 3

我设法使用上面描述的youtube方法并在cordova框架和$ ionicView.beforeLeave事件中的Pause事件中执行此操作。

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

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

4 个答案: