How to pause or stop an iframe youtube video when you leave a tab view or minimize your Ionic app

Question

I have an Ionic app that I want to deploy to the Android games store, my app just has a list of videos in tab 1, and then when you click on 1 from the video, it 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> 

It all works great. The problem is related to the YoutubeAPI policy on the Google Play Store, which you do not allow your application to play video or audio on YouTube, for example, when you minimize your application or switch to another tab.

What is the best way to achieve this? I need to make sure that when you minimize or switch to another tab, this will stop the YouTube video from playing with the iframe if the user has not stopped it on their own.

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

Now I can stop the video by calling this function with the 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 with Ionic Serve, if I run the same code on an Android phone, I get Reference Error: Div Not Defined. Not sure why this will work in the browser, but not in the application when it runs on Android.

I also need to understand in Ionic how to call this function for each scenario where you cannot watch the application, so to close the application in the background, by going to a new tab, press the return button ... Is there any way to add this function to call all these scenarios?

Answer 1

To summarize, using $ ionicView , you can prevent network clutter from Youtube XHR requests (which go into pieces) when navigating to other views, for example:

  $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 from the very beginning when you go to the view containing the video.

Answer 2

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

Remember to enable JS at the end of the video *? enablejsapi = 1

Answer 3

I managed to get this working using the youtube method described above and do it in the Pause event in the cord structure and the $ ionicView.beforeLeave event.

Answer 4

I used the @Rogerio code and had to implement / add the following as the application runs 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":""}', '*'); } }