Flowplayer Video Progress Tracking?
Using the FlowPlayer API, is there a way to capture Video Progress? I'm looking to capture the progress of the video so I can fire events to the page at certain points in the Video. In Flash, there is Progress Event that fires every frame, and I was hoping that since FlowPlayer is Flash, that the Progress Event w开发者_StackOverflow中文版ould also be exposed. I can't seem to find anything as straight-forward in the FlowPlayer docs.
If a Progress Event doesn't exist. Are there any suggestions on how to construct a such a thing using JS setInterval and existing FlowPlayer API methods?
I hacked up a quick snippet of Javascript that interacts with the Flowplayer Player
and Clip
objects to determine the video progress.
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");
}
You can see a demo on JSFiddle.
It registers event handles for the start
and resume
events of the player. Once video playback has begun, it registers an interval which runs every second (feel free to modify this to run more often). The interval calls checkVideoProgress()
every time it gets executed which then gets the current playback time and total duration from the Clip
object to calculate the progress.
Additionally, an event handler is also registered for stop
, pause
and finish
events to clear the interval once the video has been paused/stopped.
Maybe you can use Flowplayers Cuepoints
Add cuepoints to the data property (either seconds, or seconds from end with a minus)
<div class="flowplayer" data-cuepoints="[1.5, 2, 3, -1]"><!-- video here --></div>
Then bind an event:
flowplayer(function (api, root) {
api.bind("cuepoint", function (e, api, cuepoint) {
console.log(cuepoint);
});
});
精彩评论