使用FlowPlayer API,有没有办法捕获视频进度?我希望捕获视频的进度,以便我可以在视频中的某些点向页面发送事件。在Flash中,有一个Progress事件触发每一帧,我希望由于FlowPlayer是Flash,因此也会暴露Progress事件。我似乎无法在FlowPlayer文档中找到任何直接的内容。
如果进度事件不存在。关于如何使用JS setInterval和现有的FlowPlayer API方法构建这样的东西有什么建议吗?
答案 0 :(得分:7)
我编写了一个快速的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
事件注册事件处理程序,以便在视频暂停/停止后清除时间间隔。
答案 1 :(得分:1)
也许你可以使用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);
});
});