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?

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 https://developers.google.com/youtube/iframe_api_reference — Jeffery ThaGintoki, Jun 02 '15 at 11:44
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? — musician2000, Jun 02 '15 at 16:23
I've posted similar answer [here](https://stackoverflow.com/questions/34835308/how-to-pause-youtube-video-on-inappbrowser-when-my-cordova-app-goes-to-backgroun/44833252#44833252). See if it might be helpful. — Arsen Khachaturyan, Jun 29 '17 at 19:17

score 6 · Answer 1 · answered Apr 22 '17 at 01:34

6

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

answered Apr 22 '17 at 01:34

Rogério Cruz Sousa

111
1
5

1

With a bit more rep, [you will be able to flag duplicate questions like this](https://stackoverflow.com/privileges/comment). 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*. – Nathan Tuggy Apr 22 '17 at 02:02
1

@Rogerio this really helped for ionic2 and 3 as well – justnajm Jan 13 '19 at 16:24

score 4 · Answer 2 · answered Aug 27 '16 at 17:51

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.

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` — Nick, Oct 30 '16 at 14:04

score 2 · Answer 3 · answered Jun 02 '15 at 22:58

2

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.

answered Jun 02 '15 at 22:58

musician2000

59
2
6

this is what i was going to suggest – Jess Patton Jun 09 '15 at 17:25

score 1 · Answer 4 · answered Jan 16 '19 at 11:40

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

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

4 Answers4

Linked