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

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

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


video tracking flowplayer
person Lounge9    schedule 17.08.2011    source источник
comment
Я смог разработать метод с использованием ключевых точек. Моя особая проблема заключалась в том, что мне нужно было динамически определять, когда видео было воспроизведено 25, 50 и 75% пути. Самое раннее, что я обнаружил, продолжительность видео известна игроку в событии onMetaData. Это сработало для меня:   -  person Lounge9    schedule 22.08.2011
comment
Это сработало* для меня: gist.github.com/1161365 *Это не работает на iOS, когда с помощью плагина FP для iPad. Но это, кажется, большая проблема FlowPlayer.   -  person Lounge9    schedule 22.08.2011

Ответы (2)


arrow_upward
7
arrow_downward

Я взломал небольшой фрагмент 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 зарегистрирован обработчик событий, который очищает интервал после приостановки/остановки видео.

person Aamir    schedule 19.10.2012

arrow_upward
1
arrow_downward

Возможно, вы можете использовать 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);
    });
});
person olli    schedule 15.03.2015