Comment détecter la fin de la lecture d'une vidéo YouTube?

Je travaille sur un site qui contient une tonne de vidéos YouTube intégrées, le client souhaite afficher une fenêtre contextuelle chaque fois qu'une vidéo cesse de se diffuser.

J'ai regardé l'API youtube et il semble y avoir un moyen de détecter la fin d'une vidéo:

http://code.google.com/apis/youtube/js_api_reference.html

mais je ne peux pas intégrer les vidéos comme ils l'ont mentionné sur cette page car les vidéos sont toutes déjà sur le site (des milliers qui ont été ajoutées manuellement en collant le code d'intégration).

Existe-t-il un moyen de détecter la fin de ces vidéos sans changer aucune des vidéos existantes (en utilisant javascript)?

— TK123
source

La seule chose que je pourrais suggérer est de changer par programme les entrées incorporées à inclure enablejsapi=1. S'ils se trouvent dans une base de données, il devrait être assez facile de modifier l' srcattribut. Vous pourriez avoir besoin de certaines expressions régulières si elles sont insérées statiquement dans des fichiers HTML.

— télécharger

Réponses:

175

Cela peut être fait via l'API du lecteur youtube:

http://jsfiddle.net/7Gznb/

Exemple de travail:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

— TK123
source

Comment avez-vous intégré cela à plusieurs vidéos sur une seule page?

— motoxer4533

@ motoxer4533 et bien je n'ai pas eu à gérer plusieurs vidéos sur la même page mais une seule par page. Je ne sais pas si l'API permet la création de plusieurs joueurs et la détection de leurs points de terminaison individuels.

— TK123

ne devrait pas être difficile à configurer pour plusieurs joueurs - il suffit de configurer plusieurs var player1, var player2, var player 3 etc puis exécutez le code de configuration plusieurs fois - avec chaque nouvelle var

— codeguy

Aussi un exemple complet de faire quelque chose de similaire en utilisant l'api iframe ici developer.google.com/youtube/…

— JeremyWeir

Pour plus de lisibilité, je conseillerais YT.PlayerState.ENDED lors de la vérification de l'état.

— Bart Burg

-6

Ce que vous voudrez peut-être faire est d'inclure un script sur toutes les pages qui fait ce qui suit ... 1. trouvez l'iframe youtube: recherchez-le par largeur et hauteur par titre ou en trouvant www.youtube.com dans sa source. Vous pouvez le faire en ... - en boucle dans les window.frames par une boucle d'entrée, puis en filtrant par les propriétés

injecter jscript dans l'iframe de la page actuelle en ajoutant la fonction onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
Ajoutez les écouteurs d'événements, etc.

J'espère que cela t'aides

— yshouman
source

Je ne sais pas si cela est possible en raison des règles inter-domaines

— Asher Garland