Comment mettre en pause ou arrêter une vidéo youtube iframe lorsque vous quittez une vue d'onglet ou de minimiser votre application ionique

j'ai une application ionique que je veux déployer sur l'android play store, mon application a juste une liste de vidéos sur 1 onglet, puis quand vous cliquez sur 1 de la vidéo, il lit ensuite la vidéo dans un autre onglet en utilisant un iframe comme celui-ci "" 

<div class="video-container">
    <iframe id="VideoPlayer" ng-src="{{getIframeSrc(videoid)}}" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

tout Cela fonctionne très bien. Le problème est dû à la Politique YoutubeAPI Google Play Store vous n'êtes pas autorisé à permettre à votre application de lire la vidéo youtube ou l'audio en arrière-plan, par exemple lorsque vous minimisez votre application ou de passer à un autre onglet.

Quelle est la meilleure façon d'y parvenir? Je dois m'assurer que lorsque vous minimisez ou passer à un autre onglet, il va empêcher la vidéo youtube de jouer à partir de l'iframe si l'utilisateur n'a pas arrêté eux-mêmes.

*******mise à JOUR********

je peux maintenant arrêter la vidéo en appelant cette fonction en utilisant un bouton 

$scope.stopVideo = function() {

 var iframe = document.getElementsByTagName("iframe")[0].contentWindow;

   iframe.postMessage('{"event":"command","func":"' + 'stopVideo' +   '","args":""}', '*');
}

cependant cela ne fonctionne que lorsque je le teste en utilisant Ionic Serve, si j'exécute le même code sur un téléphone android, je reçois erreur de référence: Div pas défini. Pas sûr pourquoi cela fonctionnerait dans le navigateur, mais pas sur l'application quand il est exécuté dans Android.

j'ai encore besoin de comprendre dans Ionic comment appeler cette fonction pour chaque scénario où vous ne pouvez pas regarder l'application, donc pour fermer l'application à l'arrière-plan, aller à un nouvel onglet, appuyez sur le bouton arrière... Est il possible que je peux ajouter cette fonction à appeler pour tous ces scénarios?

3
demandé sur musician2000 2015-06-02 14:20:57

3 réponses

pour résumer, en utilisant $ ionicView , vous pouvez empêcher votre réseau d'être encombré par Youtube XHR demandes (qui viennent en morceaux), lors de la navigation vers d'autres vues, comme si : 



        $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();
        });



Vous pouvez bien sûr utiliser stopVideo() au lieu de pauseVideo () si vous voulez que la vidéo soit lue depuis le début, lors de la navigation de retour à la vue contenant la vidéo.

4
répondu Christian Bonato 2016-08-27 17:51:37

Solution pour Ionic2, avec Tapuscrit 

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

n'oubliez pas d'activer JS à la fin de la liaison vidéo *?enablejsapi=1

3
répondu Rogério Cruz Sousa 2017-04-22 01:34:57

j'ai réussi à obtenir ce fonctionnement en utilisant la méthode youtube décrite ci-dessus et en faisant cela dans L'événement Pause dans le cadre cordova et le $ionicView.beforeLeave événement.

2
répondu musician2000 2015-06-02 22:58:57