How to skip to a chapter in a video with JW Player?

A chapter is a place in the timeline of a streaming video. It can be anywhere in the video and there is no need to define chapters upfront. With JW Player 5.10, you can add chapter links to any part of a video or audio. This is very useful in lengthy videos/audios which cover several topics. Each link represents a chapter and you can add as many as you like.

Other video players have this feature as well, but in this tutorial, we explain how to make hyperlinks for JW Player, created by Longtailvideo. There is no difference in approach between video and audio, you do the same for both.

Requirements upfront

1. This works only with streaming media. Therefore you need to have Flash Media Server installed by Adobe, or work with a service like S3 Amazon/CloudFront or any video service that provides the streaming software. Unless you know what you are doing and prepared to spend a lot of time configuring the software, it is not advisable to install the streaming software yourself.
2. You need to have JW Player 5.10 installed. This option does not work with JWplayer 6.x
   You find more about installing JW Player and configuring streaming video in the tutorial:
   https://www.miracletutorials.com/embed-streaming-video-audio-with-html5-fallback/
3. We presume you have followed the previous tutorial on how to embed a video, using JW Player. If not, click here to go to the tutorial and come back later when you succeeded embedding a streaming video.
4. Embed a video in an article (or page) before you proceed.
5. Determine where you want chapters in your media, jotting down the time(s) in seconds and/or fractions thereof on a simple text editor, like notepad.exe (PC) or Simple text (Mac). Do not use a rich text editor because we are going to copy and paste from there.

When you are ready, we can proceed creating the first chapter link to your video or audio.

How to create a chapter link

The links make use of javascript included in the script you installed with JW Player. This is why those links will not work without the player installed.
The links themselves are actually quite simple. Consider this example below. As usual with our tutorials, green is the part to copy, red is the part to really focus on:

<a href="#" onclick="jwplayer().seek(86);">Train and tube stations</a>

Copy this whole line of code (green and red) and paste it into your text document. For now, the red(bold) parts are the only ones you need to adapt. 86 means, start the video 86 seconds from the beginning, while Train and tube stations is the text of the link, usually describing shortly which chapter in the video.
You can use fragments of seconds as well, like:

<a href="#" onclick="jwplayer().seek(86.5);">Train and tube stations</a>

When you use this type of links in a content management system like Joomla, WordPress or Drupal, you need to switch to html mode because you must be able to add onclick=”jwplayer().seek(86);” into the link. This is not something you can easily place using the link icon in those article editors. Now do the following:

1. Adapt the link to your situation, setting the seconds and changing the chapter description.
2. Copy your line of code from your text editor.
3. Paste it below the embedding code of the video you placed in your article/page.
4. Save the page and view it in the browser.

If all is well, you should now see a video and below it a link. When you click that link, the video skips to the chapter (seconds) you indicated.
What may puzzle you is that when you click the link, it jumps to the top of the page. This is controlled by this part in red bold:

<a href="#" onclick="jwplayer().seek(86.5);">Train and tube stations</a>

Below you will learn how to control the chapter links in such a way that they do not move away too far from the video.
But for now; congratulations, you created your first chapter link that skips to another part in your video or audio!

How to create a chapter list

You can create a chapter list which acts somewhat like a playlist within the same video or audio. In this way you can set a range of chapters, neatly in a list. Below you see an example how this works in practice. We will explain in detail how this works:

1. Opening credits (00:00)
2. Landmarks (00:20)
3. Inactive Scenery (00:50)
4. Train and tube stations (01:26)
5. The bridges (02:03)
6. About Lost Corners (02:25)

As you can see, when you click on the links, the video remains in the same position on the screen (except the first time you click, perhaps), while you navigate within the video itself. Below, you find the code of this list:

<ol>
    <li><a href="#placeholder" onclick="jwplayer().seek(0);" >Opening credits</a> (00:00)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(20);" >Landmarks</a> (00:20)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(50);" >Inactive Scenery</a> (00:50)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(86);" >Train and tube stations</a> (01:26)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(123);" >The bridges</a> (02:03)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(145);" >About Lost Corners</a> (02:25)</li>
</ol>

When you look closely, you find that href=”#” is now replaced by href=”#placeholder”:

    <li><a href="#placeholder" onclick="jwplayer().seek(0);" >Opening credits</a> (00:00)</li>

For those of you who know html, this is quite clear, the href relates to the link within the page itself. This link starts with a hash #, followed by an ID name, in this case placeholder. You can call it whatever you like, actually. The hash # tells the browser that we want to link to an ID element within the same page. Without it, the browser will presume it is a regular link to another page. So, if we want to stay on the same page, we use an ID. If the ID does not exist, we may remain in the same place or jump to the top (depending on the browser). So, we have to make sure we create an element that contains that ID name.

In this example, we created an empty paragraph element just above the video to make sure the video is always in view when the visitor clicks a “chapter”-link. And we gave the paragraph an ID. Below you see the code used to present our video, where the red part is the element containing the ID name placeholder:

<p id="placeholder">&nbsp;</p>
<div id="container1">Load player...</div>
<script type="text/javascript">
    jwplayer('container1').setup({                                                                          
        'id': 'container1',
        'wmode': 'transparent','icons': 'true','allowscriptaccess': 'always','allownetworking': 'all',                    
        'file': 'lostcorners/lost-corners-documentary-i3.mp4',                    
        'width': '500', 'height': '300',
        'controlbar': 'bottom', 'stretching': 'uniform',
        'image':'http://xxxxxxxx.cloudfront.net/lostcorners/lost-corners-intro.jpg',
        'streamer':'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
        'modes': [
             {type: 'flash', src: 'http://www.raboo.info/wp-content/plugins/s3mediastream-video/mediaplayer/player.swf'},
             {type: 'html5', config: {'file': 'http://xxxxxx.s3.amazonaws.com/lostcorners/lost-corners-documentary-i3.mp4', 'provider': 'video' }},
         }]               
      });
</script>

The above code makes sure the video shows up in the div with ID name container1. HTML savvy readers among you might ask, why not use that #container1 to navigate to?
Testing with Firefox revealed that by using that ID, the video was not fully shown on the page. Adding a paragraph above the video seems to work best. Therefore, we added the following line before the video script:

<p id="placeholder">&nbsp;</p>

NOTE: Never place a hash # in front of the ID name when you define it. You only use a hash when you link to an element with an ID name.

<p id="placeholder"> = Correct way to create an ID name.

<p id="#placeholder"> = Wrong, the hash becomes now part of the ID name.

<a href="#placeholder"... = Correct link to an ID name.

<a href="placeholder"... = Wrong, the browser thinks this is another page.

So, by including the ID placeholder in your links, you make sure the video stays where it is, while the javascript onclick=”….” moves in the timeline of the video or audio:

onclick=”jwplayer().seek(145);”

NOTE: When you copy code from this tutorial, remember that you paste both element and link in HTML mode or it won’t work.

Now, copy the code below, paste it into your text editor:

<ol>
    <li><a href="#placeholder" onclick="jwplayer().seek(0);" >Opening credits</a> (00:00)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(20);" >Landmarks</a> (00:20)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(50);" >Inactive Scenery</a> (00:50)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(86);" >Train and tube stations</a> (01:26)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(123);" >The bridges</a> (02:03)</li>
    <li><a href="#placeholder" onclick="jwplayer().seek(145);" >About Lost Corners</a> (02:25)</li>
</ol>

We want the video or audio to show in the same position on the page, this is why href=”#placeholder” remains for each link the same. As with the first link you created, you only have to adapt the red parts now. The blue part is just optional. It displays the seconds in a typical timeline format, so that your visitor knows where this chapter is located.

When you have finished adapting this list, you can paste it under or above the embedding code of your video or audio and safe the page. Test it out, you should have a list with chapter links now with which you can jump to any part in your media.

Trouble shooting

Some content management systems do not like it if you add paragraphs by hand. If your site removes this kind of formatting, you can try something else, like adding an empty div or heading above the video. The following examples are useful alternatives:

<div id="placeholder">&nbsp;</div>
<h3 id="placeholder">&nbsp;</h3>
<img src="space.gif" id="placeholder" />

The &nbsp; is a hard coded version of a space character. Just typing <p id=”placeholder”> </p> is not enough to force a content management system to respect it. Generally, it will think this line of code is irrelevant and simply remove it, driving you insane in the process. 😉
The &nbsp; may prevent this from happening (although not always).

Joomla 2.5 has a quirk which you can solve using this tutorial: http://www.footprintaddons.com/news-articles/38-articles/138-formatting-stripped-from-editor-in-joomla-25

We hope this tutorial is useful to you. It is perhaps a bit challenging for some of you, so if you have questions, let us know!