How to pause or stop an iframe youtube video when

问题:

I have a Ionic App that I want to deploy to the android play store, my app just has a list of videos on 1 tab, then when you click on 1 of the video it then plays the video in another tab using an iframe like this

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

This all works fine. The issue is due to YoutubeAPI Google Play Store policy you are not allowed to allow your app to play the youtube video or audio in the background, for example when you minimise your app or move to another tab.

What is the best way to achieve this? I need to make sure when you minimise or move to another tab, it will stop the youtube video from playing from the iframe if the user hasn't stopped it themselves.

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

I can now stop the video by calling this function using a button

$scope.stopVideo = function() {

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

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

However this only works when I test it using Ionic Serve, if I run the same code on an android phone, I get Reference Error: Div Not Defined. Not sure why this would work in browser, but not on the app when it is run in Android.

I also still need to understand in Ionic how to call this function for every scenario where you may not be looking at the app, so for closing the app to the background, going to a new tab, press back button... Is there a way I can add this function to be called for all these scenarios?

回答1:

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

Don't forget to enable JS at the end of the video link *?enablejsapi=1

回答2:

To sum up, using $ionicView, you can prevent your network from being cluttered by Youtube XHR requests (which come in chunks), when navigating to other views, like so :

        $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();
        });

You can of course use stopVideo() instead of pauseVideo() if you want the video to play back from the start, when navigating back to the view containing the video.

回答3:

I managed to get this working using the youtube method described above and doing this in the Pause event in the cordova framework and the $ionicView.beforeLeave event.

回答4:

I used @Rogerio code and had to implement/add following, for case app goes in the background.

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