Adding onPause / onResume to Youtube video on Ionic 2 page

Question

I have a little problem that I need to install on a very basic Android demo application in Ionic 2.

When a Youtube video is played on the home page, if you press the power button or the phone goes into sleep / lock mode, the Youtube video will continue to play. This problem causes Google to reject the application in the Play Store, as they do not allow this to happen on Youtube.

Therefore, I need to add a code to pause the video if the state changes and resumes when I wake up again.

The function I need to add seems to be called onPause and onResume, but I'm not sure how and where to add the code to make this function work with this custom Youtube code.

Here are the files in the repo, and the APK (only 3 MB) is just a change on the home page when installing empty ionic 2, where you can see the problem in action.

Github Repo
APK on Github

Answer 1

I would have avoided the problems you’re having by going directly to the Youtube Video plugin, you can see the Preview video on how to install it here.

https://www.udemy.com/master-ionic-3-with-ionic-native-and-cordova-integrations

NODE

ionic cordova add https://github.com/JonSmart/CordovaYoutubeVideoPlayer

npm install @ionic-native/youtube-video-player

APP.MODULE.TS

import {YoutubeVideoPlayer} from '@ionic-native/youtube-video-player'

add to supplier list YoutubeVideoPlayer

HOME.TS

import {YoutubeVideoPlayer} from '@ionic-native/youtube-video-player'

In export class

constructor (private videoPlayer: YoutubeVideoPlayer ) {}

playVideo(video: Video) {
    this.videoPlayer.openVideo(video.videoId)
}

Android API Key Search for "Youtube Data API Overview"

config.xml ("under allow-intent")   

Answer 2

, , n00b, 50 . noobs . n00b , .

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

export class page {
    currentVideoSource: SafeResourceUrl;
    constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {
        this.currentVideoSource = this.sanitizer.bypassSecurityTrustResourceUrl("youtubeurl");
    }

src - iframe

[src]="currentVideoSource";

Answer 3

URL- Angular2 DomSanitizer. , Angular2, URL- .

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Answer 4

,

, Apache Cordova.

Apache Cordova IonicFramework.

, $ionicPlatform.ready().

resume. , .

. , .

. , , .

offline. , , .

JS

angular.module(...).run(function($ionicPlatform){
        $ionicPlatform.ready(function() {
           document.addEventListener("pause", function() {
              //Code to pause the video
           }, false);
     });

. Apache Cordova