Flowplayer Видео Отслеживание прогресса?

Question

Используя API FlowPlayer, есть ли способ захвата Video Progress?Я хочу зафиксировать ход видео, чтобы в определенных точках видео можно было запускать события на странице.Во Flash есть событие Progress Event, которое запускает каждый кадр, и я надеялся, что, поскольку FlowPlayer является Flash, событие Progress также будет отображаться.Кажется, я не могу найти ничего более прямолинейного в документах FlowPlayer.

Если событие прогресса не существует.Есть ли какие-либо предложения о том, как сконструировать такую ​​вещь, используя JS setInterval и существующие методы FlowPlayer API?

Answer 1

Я взломал быстрый фрагмент Javascript, который взаимодействует с объектами Flowplayer Player и Clip, чтобы определить ход видео.

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

Вы можете увидеть демонстрацию на JSFiddle .

Регистрирует дескрипторы событий для start и resume событий игрока.Как только воспроизведение видео началось, оно регистрирует интервал, который выполняется каждую секунду (не стесняйтесь изменять его, чтобы запускать чаще).Интервал вызывает checkVideoProgress() каждый раз, когда он выполняется, и затем получает текущее время воспроизведения и общую длительность от объекта Clip для расчета хода выполнения.

Кроме того, обработчик событий также зарегистрирован для stop, pause и finish события для очистки интервала после того, как видео было приостановлено / остановлено.

Answer 2

Может быть, вы можете использовать Flowplayers Cuepoints

Добавление ключевых точек к свойству данных (либо секунды, либо секунды с конца со знаком минус)

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

Затем свяжите событие:

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