Subtitles for videos with HTML5

September 21, 2018

453

The HTML5 specification for the element video provides the ability to add one or more tracks with subtitles to the movie. This is an option that greatly increases accessibility, both because it is possible to make the audio content usable, through the superimposed text, to the deaf, and because it can provide a valid alternative to those who do not speak the original language of the movie.

The implementation is done through the use of the HTML5 element track. At the moment it is supported by the main browsers, with the exception of Firefox. The browser more adherent to the specification is, however, Internet Explorer, which introduced support for movies subtitled in version 10 and that has further improved in version 11. The examples attached to the article were tested with the latest versions of Chrome, Opera, Safari and Internet Explorer, including, for the latter, the preview release of IE11.

Now let’s see how to proceed to add subtitles to a movie (in the examples we used a short video in MP4 format taken from the television series Breaking Bad).

Create subtitles

In the process we are about to examine, perhaps the most complex step is the first one: the creation of the text file with subtitles. The ideal scenario is the one where you have at least a textual transcription of the audio content to be converted into one of the two subtitle formats supported by the specification and by the browsers. If the transcription is missing, it will obviously be necessary to proceed with creating it first.

The transcription will then be divided into bars (in English cues ) and each beat will then be synchronized with the original audio. It is undoubtedly a complex process, especially if the movie is long, but there are tools that can help.

One of these is HTML5 Video Caption Maker, freely usable on the Microsoft website. It directly produces a track of synchronized subtitles in one of the two formats supported by the specification, TTML-1.0, and WebVTT.

The first of the two formats enjoy both W3C and industry support, being used, for example, for subtitles on sites such as Netflix and Hulu. Syntactically it presents itself as a true XML markup language.

WebVTT (Web Video Text Tracks) is currently, however, the preferred option to get the best cross-browser support. As a format, it is among other things much less complex (though less powerful) than TTML. In fact, a WebVTT trace is nothing more than a UTF-8 text file with an extension .vtt. Within the file, the text is divided into bars and for each bar, the initial and final time is indicated, that is the moment in which the bar appears on the screen and the one in which it disappears. The times must be separated with two dashes and the major symbol –>.

The format with which the time is expressed is very rigid. The hours and minutes must be indicated with two digits, with three digits a thousandth after the second. The digits must be separated with a dot. Here’s what the .vtt file looks like with the Italian track we used in our example:

<pre class=”brush: php; html-script: true”>
WEBVTT

00: 00: 02.000 -> 00: 00: 05.980
Who do you think you’re watching?

00: 00: 06.000 -> 00: 00: 08.980
You have no idea how many
do I make money in a year?

00: 00: 09.000 -> 00: 00: 11.980
Even if I told you
you would not believe it.

00: 00: 12.000 -> 00: 00: 13.980
You know what would happen
</pre>

The WebTTV format was born as a web version of the SubRip subtitle format. The conversion from a track of subtitles .srtin .vttis therefore rather simple. Just take into account the differences between the two formats as specified in this Wikipedia article.

Insert the tracks and check the display

Once you have created the track (or tracks) with the subtitles you just have to connect them to the movie. From here on you work with the HTML5 code.

Here’s how we defined the insertion of the movie in our initial example :

As you can see, the element trackis, with the element source, a child element of video.

For the latter, we have specified two options. With the attribute we autoplay specify that the movie must start without user intervention; with the attribute, controls we make sure that the player has the usual controls in evidence. It is an option to always use if you insert subtitles because their deactivation or the choice between the various languages is done through a special check.

In the screenshot, you can see, together with the time progress bar, the volume button and the full-screen display button, the (CC) button for managing subtitles.

This button appears when, together sourcewith the element with which we connect the movie, we insert one or more elements trackfor subtitles.

The element trackis accompanied by a series of attributes:

Attribute	Description
`src`	must contain the reference to the file `.vtt`or TTML with the subtitles.
`label`	it is an auxiliary text, what is shown in the player in the subtitle selection menu.
`srclang`	an entirely optional attribute, it is the indication with the international code of the language of the track.
`kind`	specify the type of track; the possible values are `captions`(subtitles with the accompanying audio effects such as those for the hearing impaired of Teletext), `subtitles`(subtitles only of dialogues and speech),`metadata`(tracks for non-visual accompanying data),`description`(description for speech synthesis), `chapters`( indication of the chapters). Using one of the last three types, subtitles are not displayed, so in common practice, we will always choose between `captions`and`subtitles`.
`default`	if specified, this attribute indicates to the browser what is the default trace to display; is an optional attribute, because however you can select the track from the appropriate control, but not adhering to the specific browser as Safari, Chrome and Opera do not show subtitles if you do not indicate at least one track with this attribute.

In our example, therefore, the track in English will be shown as default and you can activate the one in Italian by acting on the subtitle button.

Check the subtitles with Javascript

So far the basic configuration. For the developers, the positive note is that for the element tracka complete API is available with which it is possible to interact via Javascript with the subtitle track, even at the level of the single bars. Even with respect to this factor, Internet Explorer is the browser that currently offers the widest range of options and potential. All the examples that we will see from here on are readjustments of the code available on the Microsoft site in the documentation for the element track.

In the second example we inserted a box with a button at the bottom of the video. At the click load as the content of the box the entire text track divided into bars.

Here is the HTML code:

<pre class=”brush: php; html-script: true”>
<video id = “myVideo” controls autoplay>
<source src = “danger.mp4” type = “video / mp4”>
<track id = “enTrack” src = “entrack.vtt” label = “English” kind = “subtitles” srclang = “en” default>
<track id = “itTrack” src = “ittrack.vtt” label = “Italian” kind = “subtitles” srclang = “it”>
</ Video>
<p> <button onclick = “getCues ();”> Show subtitles </ button> </ p>
<div id = “display”> </ div>
</pre>

And this is the simple script with the function getCues()called up with the button:

<pre class=”brush: php; html-script: true”>
function getCues () {
var myTrack = document.getElementById (“enTrack”). track;
var myCues = myTrack.cues;
for (var i = 0; i <myCues.length; i ++) {
document.getElementById (“display”). innerHTML + = (myCues [i] .text + “<br/>”);
}
}
</pre>

The script identifies the trace in English through the id assigned to it ( enTrack) and assigns it to the variable myTrack. An array is then created starting from the bars ( cues) which are then inserted into the box with id display.

In the third example , the event is used cuechange, which triggers the passage from one beat to another, to display in the box the individual bars as they are shown on the video. Here is the script:

<pre class=”brush: php; html-script: true”>
document.addEventListener (“DOMContentLoaded”, function () {
var track = document.getElementById (“itTrack”);
track.addEventListener (“cuechange”, function () {
var myTrack = this.track;
var myCues = myTrack.activeCues;
if (myCues.length> 0) {
var disp = document.getElementById (“display”);
disp.innerText = myCues [0] .text;
}
}, false);
}, false);
</pre>

This example can provide the starting point for a further step. We can show the beats directly in a box outside the video, without appearing superimposed. Just set the value for the attribute kindon the value metadata, as in the fourth demo .

You can also create a menu for choosing subtitles outside the player, as in the last example (which only works on Internet Explorer).

With this large set of capabilities, Internet Explorer 11 adds the possibility to dynamically create subtitle tracks and beats at runtime, even to modify them. It is, in fact, the first browser to adapt to the specification for the so-called dynamic TextTrack Objects.