HTML and CSS Reference
In-Depth Information
JavaScript Support for Subtitles and Captions
The track element provides the URL for the text tracks. Combine this with XMLHttpRequest
to access the file, and JavaScript and CSS in order to display the contents, and you now have
a way of providing captions and subtitles, without waiting for the browser.
Of course, processing the track files and displaying the result is not a trivial task. You not only
have to parse out the subtitle entries, but also apply any annotation if the file is WebVTT. Then
you have to provide a way for the user to select whether to display captions or subtitles, and
also display them in such a way that they effectively provide subtitle/caption support without
overshadowing the video.
All of this is doable, with a lot of time. Happily, though, we don't have to create any of this
functionality (well, not unless we want to).
There are various HTML5 video player applications, libraries, and utilities, but I picked three
for this chapter because of their subtitle support. The first is Captionator, created by Chris-
topher Giffard. The second is Playr, by Julien Villetorte. The third is the Leanback player,
which also provides excellent keyboard access.
NOTE
Download Captionator from
https://github.com/cgiffard/Captionator
. Download Playr at
ht-
tp://www.delphiki.com/html5/playr/
.
Access the Leanback Player at
http://dev.mennerich.name/
Captionator
Captionator is quite easy to use. You add a link to the JavaScript library to your HTML page,
and then a brief block of code to trigger the application when the window is loaded:
<script type="text/javascript" src="js/captionator.js"></script>
<script type="text/javascript">
window.addEventListener("load",function(eventData) {
captionator.captionify();
},false);
</script>
There is a CSS subdirectory with the application, but it's there for demonstration purposes,
and doesn't need to be included.
