¿Cómo detectar cuando un video de youtube termina de reproducirse?


93

Estoy trabajando en un sitio que tiene una tonelada de videos de youtube incrustados, el cliente quiere mostrar una ventana emergente cada vez que un video deja de reproducirse.

Miré la api de youtube y parece haber una forma de detectar cuándo termina un video:

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

pero no puedo incrustar los videos como lo mencionaron en esa página, ya que todos los videos ya están en el sitio (miles que se han agregado manualmente pegando el código de inserción).

¿Hay alguna manera de detectar el final de estos videos sin cambiar ninguno de los videos existentes (usando javascript)?


2
Lo único que puedo sugerir es cambiar programáticamente las entradas de inserción para incluir enablejsapi=1. Si están en una base de datos, debería ser bastante fácil cambiar el srcatributo. Es posible que necesite algunas expresiones regulares si se insertan estáticamente en archivos HTML.
descargar

Respuestas:


175

Esto se puede hacer a través de la API del reproductor de YouTube:

http://jsfiddle.net/7Gznb/

Ejemplo de trabajo:

    <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>

1
¿Cómo integró esto con varios videos en una página?
motoxer4533

@ motoxer4533 bueno, no tuve que lidiar con varios videos en la misma página, sino solo uno por página. No estoy seguro de si la API permite que se creen varios jugadores y se detecten sus puntos finales individuales.
TK123

1
no debería ser difícil de configurar para varios jugadores: simplemente configure varios var player1, var player2, var player 3, etc., luego ejecute el código de configuración varias veces, con cada nueva var
codeguy

También hay un ejemplo completo de
cómo

3
Para mayor legibilidad, recomendaría YT.PlayerState.ENDED al verificar el estado.
Bart Burg

-6

Lo que puede querer hacer es incluir un script en todas las páginas que haga lo siguiente ... 1. encontrar el iframe de youtube: buscándolo por ancho y alto por título o encontrando www.youtube.com en su fuente. Puede hacer eso ... - pasando por window.frames por un bucle for-in y luego filtrando por las propiedades

  1. inyecte jscript en el iframe de la página actual agregando la función onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. Agregue los oyentes de eventos, etc.

Espero que esto ayude


1
No estoy seguro de si esto es posible debido a las reglas de dominio cruzado
Asher Garland
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.