Providing Video Chapter Markers

Longer videos are easier to digest and scan when they have been divided into chapters (like a DVD). Using the JavaScript API, it is possible to instantly seek to a chapter in a video. Note this works best for streaming (HTTP or RTMP) videos, since regular downloads have to be loaded in advance before the viewer can seek ahead.

Demo

Jump to a chapter in the video:

• Opening credits (00:00)
• A dangerous quest (01:46)
• Scales (02:38)
• The attack (04:47)
• In pursuit (05:53)
• Showdown in the cage (07:55)
• Eye to eye (10:13)
• Ending Credits (12:28)

Code

Here's the code for this demo. The jwplayer().seek(123) commands make the player seek to the right position.

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

<script type="text/javascript">
  jwplayer("container").setup({
    file: "/videos/sintel.mp4",
    flashplayer: "/jwplayer/player.swf",
    height: 306,
    streamer: "rtmp://example.com/vod/",
    width: 720
  });
</script>

<ul>
  <li><a href="#" onclick="jwplayer().seek(0);">Opening credits</a> (00:00)</li>
  <li><a href="#" onclick="jwplayer().seek(106);">A dangerous quest</a> (01:46)</li>
  <li><a href="#" onclick="jwplayer().seek(158);">Scales</a> (02:38)</li>
  <li><a href="#" onclick="jwplayer().seek(287);">The attack</a> (04:47)</li>
  <li><a href="#" onclick="jwplayer().seek(353);">In pursuit</a> (05:53)</li>
  <li><a href="#" onclick="jwplayer().seek(475);">Showdown in the cage</a> (07:55)</li>
  <li><a href="#" onclick="jwplayer().seek(613);">Eye to eye</a> (10:13)</li>
  <li><a href="#" onclick="jwplayer().seek(748);">Ending Credits</a> (12:28)</li>
</ul>

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!