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

Question

Je travaille sur un site qui contient une tonne de vidéos youtube intégrées. Le client veut afficher une fenêtre contextuelle lorsqu'une vidéo s'arrête de s'afficher.

J'ai regardé l'API de 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 le mentionnent 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 modifier les vidéos existantes (en utilisant le javascript) ?

Answer 1

Cela peut être fait par 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>

Answer 2

Ce que vous pouvez faire, c'est inclure un script sur toutes les pages qui fait ce qui suit ... 1. trouver la youtube-iframe : en la recherchant par la largeur et la hauteur par le titre ou en trouvant www.youtube.com dans sa source. Vous pouvez le faire en ... - en parcourant les window.frames par une boucle for-in et en filtrant ensuite par les propriétés.

1. injecter le jscript dans l'iframe de la page courante en ajoutant la fonction obligatoire onYoutubePlayerReady http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

2. Ajouter les écouteurs d'événements, etc.

J'espère que cela vous aidera