Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I hacked up a quick snippet of Javascript that interacts with the Flowplayer <code>Player</code> and <code>Clip</code> objects to determine the video progress.</p> <pre><code>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"); } </code></pre> <p>You can see a demo on <a href="http://jsfiddle.net/2qnxM/" rel="noreferrer">JSFiddle</a>.</p> <p>It registers event handles for the <code>start</code> and <code>resume</code> 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 <code>checkVideoProgress()</code> every time it gets executed which then gets the current playback time and total duration from the <code>Clip</code> object to calculate the progress.</p> <p>Additionally, an event handler is also registered for <code>stop</code>, <code>pause</code> and <code>finish</code> events to clear the interval once the video has been paused/stopped.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload