HTML and CSS Reference
In-Depth Information
Captionator works by providing subtitles/captions using the file in whatever track element has
shows a complete page using the sintel_en.srtsubtitle file and Captionator to manage the sub-
titles.
Example27.Using Captionator with a SRT subtitle file
<!DOCTYPE html>
<head>
<title>Sintel with English Subtitles</title>
<meta charset="utf-8" />
<script src="js/captionator.js"></script>
<script>
window.addEventListener("load",function(eventData) {
captionator.captionify();
},false);
</script>
</head>
<body>
<video controls poster="sintelposter.jpg" width="480" height="204">
<source src="sintel.m4v" type="video/mp4" />
<source src="sintel.webm" type="video/webm" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="sintel_en.srt" default />
</video>
</body>
Calling the
captionify
method on the Captionator object not only turns on the subtitles, but
also creates a
tracks
property on the video element. Captionator also works with WebVTT,
including support for the WebVTT cues and formatting. An advantage to using the library is
that it can work with your own custom controls or the default control, as shown in
Figure 24
.
