Adding Captioned Video to an HTML5 page

This is the last post in the series, Creating and Captioning a Screen Reader Demo.

I have 3 versions of my video file in .mp4, .webm, and .ogv format. I have a timed text track file in WebVTT format. Now I just need to put them together on an HTML5 page. This part is fairly straightforward but there are always a few gotchas!

The finished captioned video is here: Using Readium in Firefox with a Screen Reader

Here is the code for the <video> element:

<video controls style="height:718px;width:882px">
<source src="ReadiumJAWSFF5.mp4" type="video/mp4">
  <source src="ReadiumJAWSFF5.webm" type="video/webm">
  <source src="ReadiumJAWSFF5.ogv" type="video/ogg">
  <track default label="English" kind="subtitles" srclang="en-US" id="englishTrack" src="ReadiumFirefoxJAWS.vtt">
Your browser does not support video
</video>

The controls option on the <video> element displays the controls to interact with the video. In theory, these should all be keyboard accessible. In Windows 7 IE 11, Chrome 40.0.2214.115 m, and Opera 27.0 do provide full tab key support for the controls. In Firefox 35.0.1 there are keyboard commands to interact with the video (Viewing HTML5 Audio and Video) but the controls are not reachable via the tab key.

In OS X 10.10.2, none of the browsers I tested, Safari 8.03, Chrome 40.0.2214.115, and Opera 27.0 provided access to the video via tab key navigation. See Keyboard Navigation in Mac Browsers for more info about tab key use. Firefox in OS X behaves the same as in Windows 7 – it provides keyboard controls. Firefox in both Windows and OS X does not provide any default controls to turn captions on and off, that feature is only available via scripting.

There is also an autoplay option for the <video> element. Please don’t use that unless absolutely necessary or if you know your users expect the video to start playing as soon as the page loads. Besides being annoying (in my opinion), autoplay is even worse for some users if they can’t turn it off via the keyboard.

I have supplied a style tag to force the height and width. This is suitable for a desktop but a fluid layout would be better. While most browsers now support HTML5 video, I also provided a text fallback within the video element for ones that don’t.

The <source> element provides access to the video itself. As long as you provide all three formats your video should play in most desktop and mobile browsers. Be certain to include the type attribute so the browser doesn’t have to load the video to determine the format.

The <track> element provides access to the captions. My example has only one track but you can have more than one in order to support multiple languages. See these posts from others for more details about using video in HTML5:

So, in theory everything should work. But, our friend IE 11 is a bit more particular. The WebVTT file with the time text track must be encoded as UTF-8 and IE needs to be informed about that by the Web server. IE will also completely ignore WebVTT files unless you setup the MIME type as text/vtt. Your Web server may already provide this information. I solved these issues via an .htaccess file. This is a file that can specify additional parameters to the Web server. It isn’t the most efficient way to express these parameters but provides a work around if you do not have administrator access to the server.

Here is the .htaccess file that works for me. I put this into the directory that contains all of the files for my demo.

<FilesMatch \.vtt$>
ForceType text/vtt;charset=utf-8
</FilesMatch>
AddType text/vtt .vtt

Phew, I have my captioned video working in all of the major browsers! These posts were a bit long winded but I hope they were helpful!


About Becka11y

Web Accessibility Architect at IBM. Have worked on various open source projects including Dojo, Apache Cordova/PhoneGap, and Readium

Leave a Reply

Your email address will not be published. Required fields are marked *