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 Christopher 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 http://www.delphiki.com/html5/playr/. Access the Leanback Player at http://dev.mennerich.name/showroom/html5_video/.
Captionator
Captionator is quite easy to use. You add a link to the JavaScript library to your HTML page, and then ...
Get HTML5 Media now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
