Detecting Playback Completion

Using the JavaScript API, it is possible to listen to playback events from a JW Player. One of the most interesting events is the completion of a video. This demo shows how to listen to it. In response, it loads a new page, but you can do many more things.

Demo

Code

Here's the code for this demo. Note the jwplayer().onComplete() command is the key. The function that is assigned in it will get executed when playback is completed.

<div id="container"></div>

<script type="text/javascript">
  jwplayer("container").setup({
    file: "/videos/bunny.mp4",
    flashplayer: "/jwplayer/player.swf",
    image: "/thumbs/bunny.jpg",
    height: 270,
    width: 480
  });
  jwplayer("container").onComplete(function() {
    alert("Thanks for watching! Find out more about the JW Player.");
    document.location = "http://www.longtailvideo.com/support/jw-player/";
  });
</script>

Other options

Some ideas for other behavior:

• Upon completion, the player could be removed, with the jwplayer().remove() command. In the player's place, you could add a Thanks for watching! (or other) message.
• Upon completion, you could load or update a list of recommended videos next to the player. You could even show a <div> with recommended videos on top of the player.
• Upon completion, you could ping a script or page that does statistics tracking for your site. Do note that, if you use Google Analytics, our GA Pro plugin will already does this (and more).

Alternative seeking use: permalinks

An interesting alternative use of the seek() function is leveraging it for creating hyperlinks to specific positions in the video. For example, you could write a script that sniffs the browser's address bar. If the bar contains a seek offset (e.g. webpage.html#seek=34), you can grab the offset and do the jwplayer().seek(34) call upon page load. Instant permalinks to any position in the video!