Having been involved with TTML now for best part of a decade, and with it finally coming to be a W3C recommendation as of 18th of November, it’s something of an end-of-era time for me. So following on from my last post , I thought I’d develop a little series talking about TTML, what it is, why it is what it is, and also expand a little on how I think we should go about integrating it into HTML5. I’ve written up a draft specification for this, and this is essentially what I’ve implemented in my Javascript demo. (I toyed with the idea of trying to do it inline here, but not sure how Wordpress would handle it).
The aim of this script is to make it drop dead simple to add TTML based closed captions, subtitles, chapter marks etc to your <video> page; all that is required is to add this line into the <head> section of your HTML:
<script src="ttml.js" type="text/javascript" > </script>
Point to the location of the script, then you need to add new <track> elements to point to your caption/subtitle/karaoke file(s). In the demo I use three track files:
<video id="theVideo" controls="controls" poster="RealPCPride_Thumb.jpg">
<source src="RealPCPride.mp4" type="video/mp4" />
<source src="RealPCPride.ogg" type="video/ogg" />
<track src="RealPCPride.wmv.en.captions.xml" kind="captions" srclang="en-US" label="English captions" />
<track src="RealPCPride.wmv.en.descriptions.xml kind="captions" srclang="en-US" label="English text descriptions" />
<track src="RealPCPride.wmv.en.xml kind="subtitles" srclang="en" label="English captions and text descriptions" />
Short video from the “I’m A PC” ad campaign.. (needs HTML 5 capable browser)
</video>
The script will add a selection element into the page, enabling the user to choose between them. That’s it!
The script is currently working in IE9 beta and Firefox 3+, and I’m working on Safari support. Still stuff to do; in particular styling the select so that it looks a little more integrated with the native video controls and handling multiple video elements. I’m also currently scoping out how chapter files should operate. But the basic caption and subtitle kinds are reasonably well supported. You should also notice that the demo adds a second video for sign translation, which is synchronised with the main video. HTML 5 doesn’t actually add tools for this yet, so this is achieved using a second video element and some script, eventually I’ll add in support so that the sign translation can be inserted using the <track> mechanism.
Without getting into the details (see the specification for that), roughly what this does is analyse the timed text file for the content that should be active at the current playback time, and then inserts equivalent elements into the host DOM.
One nice feature of this approach is that since the timed text gets integrated into the live DOM of the page, you can override the built in styles of the caption file. The script converts any role and xml:id attributes it finds in the timed text, into class and id attributes and maps the <region> element to a div with @class=”ttml_cue” currently I prefix these with ”ttml_” to try and reduce clashes with the host page; not sure if there is a cleaner way to do this without better namespace support.
Anyway, now if I have a caption like the following :
<p xml:id='subtitle1a' ttm:role='caption' begin='00:00:00:27' end='00:00:02:22' >Sean: Hello. I’m a PC,</p>
Then in my page CSS I can add a rule like:
.ttml_caption {
font-style:italic!important;
}
This will override all the captions to be italic, and if I want to be specific:
#ttml_subtitle1a {
color:red!important;
}
Obviously if you want the TTML to take precedence, and only provide defaults for styles the TTML doesn’t specify, you can leave out the !important keyword.
OK, hopefully that’s given enough of an introduction, there’s lots more to say; next time we’ll get a little more into what Timed Text is all about.
Ciao.
Sean.
