Flowplayer 视频进度跟踪？

Posted 2023-02-18

【中文标题】Flowplayer 视频进度跟踪？

【英文标题】：Flowplayer Video Progress Tracking?

【发布时间】：2011-10-29 05:26:53

【问题描述】：

使用 FlowPlayer API，有没有办法捕捉视频进度？我希望捕获视频的进度，以便可以在视频中的某些点向页面触发事件。在 Flash 中，每帧都会触发 Progress 事件，我希望由于 FlowPlayer 是 Fl​​ash，Progress 事件也会被公开。我似乎在 FlowPlayer 文档中找不到任何直截了当的内容。

如果进度事件不存在。有没有关于如何使用 JS setInterval 和现有的 FlowPlayer API 方法来构造这样一个东西的建议？

【问题讨论】：

我能够设计一种使用提示点的方法。我的特殊问题是我需要动态确定视频何时播放 25、50 和 75%。我发现播放器知道的最早视频持续时间是在 onMetaData 事件中。这对我有用：

这对我有用*：gist.github.com/1161365 *当使用 FP iPad 插件时，它在 ios 上不起作用。但这似乎是一个更大的 FlowPlayer 问题。

【参考方案1】：

我编写了一个与 Flowplayer Player 和 Clip 对象交互以确定视频进度的 javascript 快速 sn-p。

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