Angularjs 当您离开选项卡视图或最小化应用程序时，如何暂停或停止iframe youtube视频

我有一个我想部署到android play store的Ionic应用程序，我的应用程序在1个选项卡上有一个视频列表，然后当你点击其中一个视频时，它会在另一个选项卡上使用像这样的iframe播放视频

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

然而，这只在我使用Ionic Serve测试它时起作用，如果我在android手机上运行相同的代码，我会得到引用错误：Div未定义。不知道为什么这会在浏览器中起作用，但在安卓系统中运行的应用程序上却不起作用

---

我还需要在Ionic中了解如何在您可能没有查看应用程序的情况下调用此函数，因此要将应用程序关闭到后台，转到新选项卡，请按“上一步”按钮。。。有没有一种方法可以为所有这些场景添加调用此函数？

我使用上述youtube方法，并在cordova framework和$ionicView.beforeLeave事件中的暂停事件中执行此操作。

总之，使用，当导航到其他视图时，您可以防止Youtube XHR请求（成批）扰乱您的网络，如：

---

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

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

ionViewWillLeave（）{
让listaFrames=document.getElementsByTagName（“iframe”）；
对于（var index=0；index

---

别忘了在视频链接的末尾启用JS*？enablejsapi=1

我使用了@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":""}', '*');
  }
}

从“离子角度”导入{Platform}；
@组成部分({
模板：`好的`
})
建造商（公共平台：平台）{
platform.ready（）。然后（（）=>{
if（平台is（'cordova'））{
//暂停订阅
this.platform.pause.subscribe（（）=>{
//你好，暂停
});
//在简历上订阅
this.platform.resume.subscribe（（）=>{
窗口['paused']=0；
});
}
});
}
//@罗杰罗提到了这个密码
ionViewWillLeave（）{
让listaFrames=document.getElementsByTagName（“iframe”）；
对于（var index=0；index

使用youtube JS API，您可以获得所谓的播放控制和播放器设置，它为您提供了一些控制视频的功能。例如

player.pauseVideo（）：Void

暂停当前播放的视频。这一切都在这里嗨，杰弗里，谢谢你的评论，你知道我将如何把这个放到我的爱奥尼亚应用程序？例如，当应用程序被最小化或者你转到另一个选项卡时，按下后退按钮，它就会触发你提到的JSAPI？我已经发布了类似的答案。看看是否有帮助。这就是我想说的。这非常有效。要启用JSAPI，请将？enablejsapi=1放在嵌入视频的末尾。示例：

http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1

再重复一次。在那之前，对多个问题给出相同的答案并不理想。或者，如果问题不是重复的，那么针对这个特定问题定制答案。@Rogerio这对ionic2和Ionic3也很有帮助

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

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