html - ¿Fuego evento cuando vimeo video deja de reproducirse?

vimeo api

Question

Me preguntaba si era posible desencadenar un evento una vez que un video de vimeo ha terminado de reproducirse.

Actualmente tengo una incrustación de Vimeo en una superposición, que quiero eliminar una vez que el video se haya detenido. Espero que esto tenga sentido!

Realmente no tengo ningún código que sea de utilidad, pero me gustaría saber si puede agregar oyentes de eventos al video, disparar un evento una vez que el video haya terminado y cómo podría hacerlo.

Gracias Ryan

Answer 1

En primer lugar, debe incluir la ruta a la biblioteca de Frogaloop de Vimeo en su HTML (después de incluir Jquery):

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

Entonces necesitas incrustar tu video de Vimeo (otra vez en tu HTML):

<iframe id="PLAYER1" src="https://player.vimeo.com/video/76979871?api=1&player_id=PLAYER1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Aquí ''api = 1'' enciende la api - esta opción está desactivada por defecto para el rendimiento. Y, player_id = ''PLAYER1'' es el id de tu iframe.

Luego, en su archivo JavaScript, necesita lo siguiente:

$(function() {

    //Gets the iframe by id
    var iframe = $(''#PLAYER1'');
    //Creates a player var using the iframe
    var player = $f(iframe);

    // When the player is ready/loaded, add a finish event listener
    player.addEvent(''ready'', function() {
        //Adds an event ''finish'' that executes a function ''onFinish'' when the video has ended.
        player.addEvent(''finish'', onFinish);
    });

    //Define the onFinish function that will be called
    function onFinish(id) {
        console.log(''THE VIDEO HAS FINISHED PLAYING'');
    }

});

Luego simplemente reproduce el video y verifica la salida de la consola.

Aquí hay un enlace a la parte apropiada de la documentación.

Gracias a @Raptor por apuntarme hacia los documentos de api.

Answer 2

La respuesta anterior ahora está obsoleta desde que Vimeo lanzó la nueva API del reproductor de video .

Importante: asegúrese de eliminar el ?api=1 de la URL en su iframe. Esto era previamente requerido cuando se usaba la biblioteca Froogaloop y ya no es necesario. Si lo dejas, los eventos ''finalizados'', ''buscados'' y otros nunca se activarán.

Incluir el nuevo script:

<script src="https://player.vimeo.com/api/player.js"></script>

Y luego usa el siguiente ejemplo:

$(document).ready(function(){

    var iframe = $(''#container iframe'');
    var player = new Vimeo.Player(iframe);

    player.on(''ended'', function() {
        console.log(''Finished.'');
    });

});

Answer 3

http://developer.vimeo.com/player/js-api

Echa un vistazo a esta página, especialmente la parte lista de eventos. Estoy seguro de que también podría escribir algún código en él, si necesita más ayuda.