Flowplayer视频进度跟踪？

Question

使用FlowPlayer API,有没有办法捕获视频进度？我希望捕获视频的进度,以便我可以在视频中的某些点向页面发送事件.在Flash中,有一个Progress事件触发每一帧,我希望由于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在视频暂停/停止后清除间隔的事件.