Saved by the bell…uh test – addTextTrack not at risk!

  • Article

While I was at the W3C Face to Face conference, I saw that the addTextTrack method was on the at-risk list for HTML5. As I had written an example and a reference page to document that API, I asked Robin Berjon about it. We brought it up on the screen and it appeared to be supported by at least a couple of browsers. It seemed the test was faulty. We tagged it as discussed at the F2F.

A few days later, Sylvia, one of the editors for the media spec brought it up again. I posted a copy of my example (and got smacked down for not including more formats) to show it worked in at least Chrome and IE. My example only had an MP4 format video, as I was linking to one on the IE Testdrive site. Anyway, long story short, Phillip reported back that test was fixed, and indeed both IE and Chrome passed the test.

What's the addTextTrack do?

Normally to get closed captioning, a video publisher would create a separate WebVTT or TTML format file (see Closed captioning, it’s not just for accessibility! TextTrack in HTML5 video for more on these formats). You can create different files for different languages, or purposes, such as scripting external content, etc.

But the problem is that you have to prepare the text track file ahead of time. Enter addTextTrack! As specified in the W3C, it lets you create textTracks as the content is playing. You can create the content programmatically based on input or other factors, or you could download updated content from your website using XML Header Request (XHR). You could even use addTextTrack as a work around for servers that don't know what to do with a WebVTT or TTML MIME type. One man's text is another man's captions, so to speak.

For an addTextTrack example, I create a simple caption track displaying the numbers 0 to 30 displayed every 5 seconds. It's very contrite, but shows the concept. See the example live online. Note that the online example only has an MP4 file link.

This source code has an MP4 and an OGG format video file. The source is a link to Archive.org and an old BBC technology series called Bad Influence. 

Legal note: Most of the content on the archive.org site is either creative commons license, or public domain. All rights of these clips remain with either archive.org or the BBC, and are here only for demonstration purposes.

This example works in Internet Explorer 11 and the latest version of Chrome. The video plays but the tracks don't show on Firefox. While addTextTrack is in the spec, the TextTrackCue constructor isn't. The addTextTrack constructor has been dropped in favor of the VTTCue constructor. I'm now looking for addTextTrack code that will work on other browsers. Suggestions?

 

<!DOCTYPE html >

<html >
< head>
<title>Add Text Tracks example</title>
< /head>
< body>

<video id="video1" controls="controls" muted="muted">
<!-- change to your own mp4 video file -–>
<!-- show using multiple file formats -->

  <source src="https://archive.org/download/bad_influence_se4ep13/Bad.Influence.se4ep13.mp4" />
<source src="https://archive.org/download/bad_influence_se4ep13/Bad.Influence.se4ep13.ogv" />

  HTML5 Video not supported
< /video>

<script>
var video = document.getElementById("video1");
var startTime, endTime, message;
var newTextTrack = video.addTextTrack("captions", "sample");
newTextTrack.mode = newTextTrack.SHOWING; // set track to display
// create some cues and add them to the new track
for(var i=0;i<30;i++){
startTime = i * 5 ;
endTime = ( (i * 5) + 5);      
message = "This is number " + i;

        // this constructor deprecated according to the new spec
newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
}
video.play();
</script>
< /body>
< /html>