Introduction

This guide explains how you set-up THEOplayer to display chapter markers as a way of navigating videos. These markers are rendered on the seekbar to visualize different segments of a video. Browsing chapters is possible by scanning through the chapter titles that are rendered on the UI while the user hovers the seekbar. This document guides you through setting up a demo just like the one that's showcased in our Demo Zone

If you are already comfortable with the THEOplayer API, you can go straight over to the TextTrackDescription part of the SourceDescription API

The following topics will be covered:

  1. Prerequirements
  2. Starting Template
  3. Adding a chapter markers track

 

1. Prerequirements

This guide expects that you have a THEOplayer license. If you aren't using THEOplayer yet, you can start your free trial here. Be sure to have THEOplayer version 2.11 or higher.

 

2. Starting Template

The first thing you need is a valid THEOplayer set-up. If you have no experience with setting up our player, we have an excellent getting started guide.

To get THEOplayer to work, you only need to do three things:

  1. Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working THEOplayer could look like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'>
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- ads THEOplayer library --> <script>
var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'https://cdn.theoplayer.com/video/sintel/nosubs.m3u8',
type : 'application/x-mpegurl'
}]
}; </script>
</body>
</html>

 

The two snippets below are the references to the JS and CSS library.

<link rel="stylesheet" type="text/css" href='/path/to/ui.css'>
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> 

 

The following snippet is your HTML container.

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

 

This snippet initializes your player, including an HLS source.

<script>
var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'https://cdn.theoplayer.com/video/sintel/nosubs.m3u8',
type : 'application/x-mpegurl'
}]
}; </script>

To fully master THEOplayer, be sure to read our documentation.

 

3. Adding a chapter markers track

Starting from the basic template above, you need to add a TextTrackDescription to your source that specifies a sideloaded text track of kind 'chapters'. THEOplayer supports loading of chapter markers in WebVTT, SRT and other text track formats. In this demostration we focus on specifying chapters through WebVTT files. WebVTT is a plain text format, part of the HTML5 standard, that's also used for providing subtitles and closed captions. These WebVTT files are quite straightforward and contain the chapter titles for specific time ranges in the video.

A sample WebVTT file could look like te following:

WEBVTT

1
00:00:00.000 --> 00:01:42.000
Opening credits

2
00:01:42.000 --> 00:04:44.000
A dangerous quest

3
00:04:44.000 --> 00:05:50.000
The attack

The following code sample shows how you can load THEOplayer with a video and sideloaded chapters track:

player.source = {
    sources : [{
        src : 'https://cdn.theoplayer.com/video/sintel/nosubs.m3u8',
        type : 'application/x-mpegurl'
    }],
    textTracks : [{
        kind : 'chapters',
        src : 'https://cdn.theoplayer.com/video/sintel/chapters.vtt',
        srclang : 'en'
    }]
};

Your updated starting template would now look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <!-- ads THEOplayer CSS -->
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- ads THEOplayer library -->
<script> player.source = { sources : [{ src : 'https://cdn.theoplayer.com/video/sintel/nosubs.m3u8', type : 'application/x-mpegurl' }], textTracks : [{ kind : 'chapters', src : 'https://cdn.theoplayer.com/video/sintel/chapters.vtt', srclang : 'en' }] }; </script>
</body>
</html>

If you want to read up on how to specify a THEOplayer source with a TextTrackDescription you can check the SourceDescription API documentation.