Flowplayer Video Progress Tracking?

Question

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 would 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?

Spam

I was able to devise a method using cuepoints. My particular problem was that I needed to dynamically determine when the video had been played 25, 50 an 75% of the way through. The earliest I found the video duration is known to the player is in the onMetaData event. This worked for me: – Spam

This worked* for me: gist.github.com/1161365 *It doesn't work on iOS when using the FP iPad plugin. But that seems to be a bigger FlowPlayer issue. – Spam

Answer 1

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.

Folkestone

Answer 2

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

Dihedral