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

Question

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?

Hawn

using the youtube JS API you have what is called Playback controls and player settings that gives you some sort of functions to control your video. Such as player.pauseVideo():Void Pauses the currently playing video. It's all in here developers.google.com/youtube/iframe_api_reference – Funky

Hi Jeffery , Thanks for your comments, do you know how I would put this into my ionic app? for example when the app is minimised or you go to another tab, press the back button it then fires the JS API you mentioned? – Hawn

I've posted similar answer here. See if it might be helpful. – Apterous

Answer 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

Madeleinemadelena

With a bit more rep, you will be able to flag duplicate questions like this. Until then, posting identical answers to multiple questions is not really ideal. Or, if the question is not a duplicate, tailor the answer to this specific question. – Aquila

@Rogerio this really helped for ionic2 and 3 as well – Hemielytron

Answer 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.

Blunge

This works perfectly. To enable the js api, put ?enablejsapi=1 at the end of the embed video. Example: http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1 – Petrarch

Answer 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.

Hawn

this is what i was going to suggest – Robtrobust

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

Hemielytron