Мониторинг хода воспроизведения Flowplayer?

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

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

Ответы

Ответ 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, чтобы очистить интервал после приостановки/остановки видео.

Ответ 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);
    });
});