Ajouter onPause/onResume à une vidéo Youtube dans une page Ionic 2

Question

J'ai un petit problème à résoudre sur une application Android de démonstration très basique dans Ionic 2.

Lorsqu'une vidéo Youtube est diffusée sur la page d'accueil, si vous appuyez sur le bouton d'alimentation ou si le téléphone passe en mode veille/verrouillage, la vidéo Youtube continue à être diffusée. En raison de ce problème, Google rejette l'application dans le Play Store, car il ne permet pas que cela se produise sur les images Youtube.

Je dois donc ajouter du code pour mettre la vidéo en pause si l'état change et la reprendre lorsqu'elle se réveille à nouveau.

La fonction que je dois ajouter semble s'appeler onPause et onResume mais je ne sais pas comment et où ajouter le code pour que cette fonction fonctionne avec ce code Youtube personnalisé.

Voici les fichiers dans un repo, et APK (seulement 3mb) juste un changement à la page d'accueil sur une installation ionic 2 vierge, où vous pouvez voir le problème en action.

Repo Github
APK dans Github

Answer 1

Je voudrais ajouter un commentaire pour compléter ce que n00b a dit, mais je n'ai pas encore 50 points de réputation. Pour ajouter à la réponse de n00b et donner un indice supplémentaire. S'il vous plaît marquez n00b comme la réponse correcte car il a posté en premier.

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

maintenant src devrait fonctionner avec quelque chose comme ce qui suit dans l'iframe

[src]="currentVideoSource";

Answer 2

Vous devez ajouter cette URL à la liste des exceptions de DomSanitizer d'Angular2. Ce que vous voyez est une fonction de sécurité d'Angular2 qui empêche les gens de charger des URL malveillantes dans notre application.

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

Answer 3

De ce article de blog ,

Il est dit que vous pouvez utiliser les écouteurs d'événements d'Apache Cordova.

Les événements Apache Cordova ne nécessitent aucune installation de plugin supplémentaire pour IonicFramework.

Pour enregistrer un événement, nous devons le faire dans notre méthode $ionicPlatform.ready().

Certains des auditeurs sont

CV - L'événement de reprise se déclenche lorsque la plate-forme native sort l'application de l'arrière-plan.

pause - L'événement se déclenche lorsqu'une application est mise en arrière-plan.

en ligne - Cet événement se déclenche lorsqu'une application est mise en ligne et que l'appareil est connecté à Internet.

hors ligne - Cet événement se déclenche lorsqu'une application est mise hors ligne et que l'appareil n'est pas connecté à Internet.

Dans votre fichier JS, ajoutez

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

Pour obtenir la liste complète des événements pris en charge, consultez le site Web de la Commission européenne. Site officiel d'Apache Cordova

Answer 4

J'éviterais les problèmes que vous rencontrez en choisissant directement le plugin vidéo Youtube. Vous pouvez voir la vidéo de présentation sur la façon de l'installer ici.

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'

ajouter à la liste des fournisseurs YoutubeVideoPlayer

HOME.TS

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

Sous la classe d'exportation

constructor (private videoPlayer: YoutubeVideoPlayer ) {}

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

Clé API requise pour Android Recherchez "Aperçu de l'API de données Youtube".

config.xml ("sous allow-intent")