CODEWITHSUNDEEP
javascriptangularjstypescriptionic-frameworkionic2
me9867
me9867

Reputation: 1599

Adding onPause/onResume to a Youtube video within an Ionic 2 page

I have a small issue I need fixing on a very basic demo Android app in Ionic 2.

When a Youtube video plays on the Homepage, if you press the power button or the phone goes into sleep/lock mode the Youtube video continues playing. This issue causes Google to reject the app in the Play Store as they do not allow this to happen on Youtube embeds.

So I need to add some code to pause the video if the state changes and resume when it wakes up again.

The feature I need to add seems to be called onPause and onResume but I am unsure how and where to add the code to get this feature working with this custom Youtube code.

Here are the files in a repo, and APK (only 3mb) just a change to the homepage on a blank ionic 2 install, where you can see the issue in action.

Github Repo
APK in Github

Upvotes: 4

Views: 931

Answers (4)

user7915679
user7915679

Reputation:

I'd avoid the issues you are having by going straight for 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 list of providers YoutubeVideoPlayer

HOME.TS

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

Under export class 

constructor (private videoPlayer: YoutubeVideoPlayer ) {}

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

API Key required for Android Search for "Youtube Data API Overview"

config.xml ("under allow-intent")

Upvotes: 0

Sagar V
Sagar V

Reputation: 12478

From this blog post,

It says you can make use of Apache Cordova event listeners.

Apache Cordova events require no additional plugin installation for IonicFramework.

To register an event we must do so in our $ionicPlatform.ready() method.

Some of the Listeners are

resume - The resume event fires when the native platform pulls the application out from the background.

pause - The event fires when an application is put into the background.

online - This event fires when an application goes online, and the device becomes connected to the Internet.

offline - The event fires when an application goes offline, and the device is not connected to the Internet.

In your JS file, add

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

For a full list of supported events, Refer to the Apache Cordova official website

Upvotes: 0

Coding Tutorials Hotspot
Coding Tutorials Hotspot

Reputation: 161

I would add a comment to add to what n00b said, but I don't have 50 reputation points yet. To add to noobs answer and give an extra hint. Please mark n00b as the correct answer as he posted first. 

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");
    }

now src should work with something like the following in the iframe

[src]="currentVideoSource";

Upvotes: 6

n00b
n00b

Reputation: 1852

you should add that URL to Angular2 DomSanitizer exception list. What you see is a security feature of Angular2 that prevents people load malicious URLs in y our app.

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

Upvotes: 1

Related Questions