Flowplayer视频进度跟踪？

Question

使用FlowPlayer接口，有没有办法捕获视频进度？我希望捕捉视频的进展，这样我就可以在视频中的某些点向页面发射事件。在Flash中，有每一帧都会触发的Progress事件，我希望既然FlowPlayer是Flash，Progress事件也会被曝光。在FlowPlayer文档中，我似乎找不到任何这样直截了当的东西。

如果Progress事件不存在。关于如何使用JS和现有的FlowPlayer setInterval方法构建这样的东西，有什么建议吗？

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