Flowplayer Video Progress Tracking?

Question

Al usar la API FlowPlayer, ¿hay alguna forma de capturar el progreso del video? Estoy buscando capturar el progreso del video para poder disparar eventos a la página en ciertos momentos del video. En Flash, hay un evento de progreso que dispara cada fotograma, y ​​esperaba que, dado que FlowPlayer es Flash, el evento de progreso también estaría expuesto. Parece que no puedo encontrar nada tan directo en los documentos de FlowPlayer.

Si un evento de progreso no existe. ¿Hay alguna sugerencia sobre cómo construir algo así utilizando JS setInterval y los métodos existentes de FlowPlayer API?

Answer 1

He cortado un fragmento rápido de Javascript que interactúa con los objetos Flowplayer Player y Clip para determinar el progreso del video.

var videoProgressInterval; 

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf"); 
flowplayer("player").onStart(startVideoProgressChecking); 
flowplayer("player").onResume(startVideoProgressChecking); 
flowplayer("player").onStop(stopVideoProgressChecking); 
flowplayer("player").onPause(stopVideoProgressChecking); 
flowplayer("player").onFinish(stopVideoProgressChecking); 

function startVideoProgressChecking() { 
    videoProgressInterval = setInterval(checkVideoProgress, 1000); 
    videoProgressInterval(); 
} 

function stopVideoProgressChecking() { 
    clearInterval(videoProgressInterval); 
} 

function checkVideoProgress() { 
    var time_completed = flowplayer("player").getTime(); 
    var total_time = flowplayer("player").getClip().fullDuration; 
    var percent_done = Math.floor((time_completed/total_time) * 100); 

    console.log(percent_done + "% of video done"); 
} 

Puedes ver una demostración en JSFiddle.

Registra los identificadores de eventos para los eventos start y resume del reproductor. Una vez que la reproducción del video ha comenzado, registra un intervalo que se ejecuta cada segundo (no dude en modificarlo para ejecutarlo más a menudo). El intervalo llama al checkVideoProgress() cada vez que se ejecuta, que luego obtiene el tiempo de reproducción actual y la duración total del objeto Clip para calcular el progreso.

Además, un controlador de eventos también se registra para los eventos stop, pause y finish para borrar el intervalo una vez que el video ha sido pausado/detenido.

Answer 2

Tal vez se puede utilizar Flowplayers Cuepoints

Añadir cuepoints a la propiedad de datos (ya sea segundo o segundos del final con un signo menos)

<div class="flowplayer" data-cuepoints="[1.5, 2, 3, -1]"><!-- video here --></div> 

se unen entonces un evento:

flowplayer(function (api, root) { 
    api.bind("cuepoint", function (e, api, cuepoint) { 
     console.log(cuepoint); 
    }); 
});