Śledzenie postępu wideo Flowplayer?

Question

Korzystając z API FlowPlayer, istnieje sposób przechwytywania Video Progress? Zamierzam uchwycić postępy filmu, aby móc emitować zdarzenia na stronie w określonych momentach wideo. We Flashu jest Event Progress, który wystrzeliwuje każdą klatkę, i miałem nadzieję, że ponieważ FlowPlayer jest Flash, to wydarzenie Progress również zostanie ujawnione. Nie mogę znaleźć niczego tak prostego w dokumentach FlowPlayer.

Jeśli wydarzenie Progress nie istnieje. Czy są jakieś sugestie, jak skonstruować coś takiego przy użyciu JS setInterval i istniejących metod API FlowPlayer?

Answer 1

Zrobiłem krótki fragment kodu JavaScript, który wchodzi w interakcję z obiektami Flowplayer Player i Clip, aby określić postęp wideo.

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"); 
} 

Możesz zobaczyć demo na JSFiddle.

Rejestruje uchwyty zdarzeń dla zdarzeń start iodtwarzacza. Po rozpoczęciu odtwarzania wideo rejestruje interwał, który jest uruchamiany co sekundę (możesz to zmodyfikować, aby działał częściej). Interwał wywołuje checkVideoProgress() za każdym razem, gdy zostanie wykonany, a następnie pobiera bieżący czas odtwarzania i całkowity czas trwania z obiektu Clip w celu obliczenia postępu.

Ponadto funkcja obsługi zdarzeń jest również zarejestrowana dla zdarzeń stop, pause i finish, aby wyczyścić interwał po wstrzymaniu/zatrzymaniu wideo.

Answer 2

Być może używać Flowplayers Cuepoints

Dodaj cuePoints do właściwości danych (zarówno sekund lub sekund od końca z minusem)

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

następnie powiązać zdarzenie:

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