The Timed Text Track API

Hi, today I've prepared for you a small example of a video that is associated with three different tracks.

Two for subtitles, in English and in German, and one track for chapters.

First, before going further, let's look at how this is rendered in different browsers. 

With Google Chrome, we've got a CC button here, that will enable or disable subtitles. 

What we can see is that by default the subtitles that are displayed are in German (in this example).

And I can just switch them on and off. 

It loaded the first track that has the default attribute. 

And I have no menu for choosing what track, what language I want to be displayed here …

If we look at FireFox, it's even worse!

We don't have any menu at all, no CC button. 

I cannot switch on the subtitles, because as of December 2015, FireFox will load only the first track, if it has the default attribute.

This is not the case, so we don't have any subtitles and we cannot display them.

With Safari, on my Mac, it's better because I've got a subtitle menu and I can choose between the different tracks. 

I can switch to English subtitles, and english subtitles will be displayed.

I'm on a MacIntosh so I cannot show you... but with other browsers like Internet Explorer or Microsoft Edge, there are situations similar to Safari. 

So, what can be do to increase the features of the default player? We can use what we call the Track API, for asking which tracks are available, activating them, and so on. 

Now, I would like to remind you the structure of a track. 

I'm just going to display the content of one of these tracks.

The tracks are made of cues and what we call a cue is a kind of time segment that is defined with a starting time and an ending time. 

And the cue can have an ID, in that case it is a numeric ID (1, 2, 3), and a content that can be HTML with bold, italic elements and it can also be a voice so when you see "v" followed by the name of the character that is speaking, it’s a voice. 

So, we are going to look at what we can do with such tracks during the course and we will see how to handle a chapter menu, how to display a nice transcript on the side of the video, that you can click to jump at the exact time the video tells the words that are on the transcript. 

And we will see also how to choose the subtitle or caption track language for the video.

So, this is finished for this small introduction video, I will just conclude by this thing here: explaining this crossOrigin="anonymous". 

We saw that during the HTML5 Part 1 course and many people asked questions about this. 

This is because of security constraints.

In browsers, when you've got the HTML page that is on a different location than the video fil and the tracks files, you will have security constraints errors. 

And if your server is configured for accepting different origins, then you can add this attribute crossOrigin="anonymous" in your HTML document and it is going to work. 

So the server here: mainline.i3s.unice.fr has beenconfigured for allowing external HTML pages to include the videos it hosts and the subtitlesit hosts, this is the reason. 

You can use the DropBox public directory herebecause Dropbox also enables cross origin requests. 

So this is all for this first video,

I see you in the next one!

• Chrome and Opera both provide a subtitle menu and load the text track set that matches the browser language. If none of the available text tracks match the browser’s language, then it loads the track with the default attribute, if there is one. Otherwise, it loads none. Let's say that support is very incomplete (!).

• Firefox also provides a subtitle menu but will show the first defined text track only if it has default set. It will load all tracks in memory as soon as the page is loaded.

Also there is a Timed Text Track API in the specification that enables us to manipulate <track> contents from JavaScript. Do you recall that text tracks are associated with WebVTT files? As a quick reminder, let's look at a WebVTT file:

WEBVTT

1

00:00:15.000 --> 00:00:18.000 align:start

<v Proog>On the left we can see...</v>

2

00:00:18.167 --> 00:00:20.083 align:middle

<v Proog>On the right we can see the...</v>

3

00:00:20.083 --> 00:00:22.000

<v Proog>...the <c.highlight>head-snarlers</c></v>

4

00:00:22.000 --> 00:00:24.417 align:end

<v Proog>Everything is safe. Perfectly safe.</v>

The different time segments are called "cues" and each cue has an id (1, 2, 3 and 4 in the above example), a startTime and an endTime, and a text content that can contain HTML tags for styling (<b>, etc...) or be associated with a "voice" as in the above example. In this case, the text content is wrapped inside <v name_of_speaker>...</v> elements.

It's now time to look at the JavaScript API for manipulating tracks, cues, and events associated with their life cycle. In the following lessons, we will look at different examples which use this API to implement missing features such as:

• how to build a menu for choosing the subtitle track language to display,

• how to display a synchronized description of a video (useful for disabled people, for example),

• how to display a clickable transcript aside the video (similar to what the edX video player does),

• how to show chapters,

• how to use JSON encoded cue contents (useful for showing external resources in the HTML document while a video is playing),

• etc.