Development Seed Blog

Make Video More Content More Accessible

We're working on a site build for a client who publishes an enormous amount of text content in six different languages. Their collection of videos, however, is currently only available on the English version of the site. Since the videos are very useful to all of their audiences, we set out to find a way to make them more accessible.

We found the solution in JW FLV Media Player, a robust tool that has already proven itself in the Drupal community. Here is an example of what our main video play landing page looks like right now for the client.

The player's subtitle feature parses an XML document based on the W3C Timed-Text specification, which allows you to specify the start time and end time of each line of text. Several applications capable of authoring these XML files are listed towards the bottom of JW's Accessibility page.


<:tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
<:body>
<:div xml:id="captions">
<:p begin="00:00:19" end="00:00:22">Je trouve très inquiétant que le monde<:/p>
<:p begin="00:00:22" end="00:00:24">semble pas au courant de l'ampleur du problème<:/p>
<:p begin="00:00:24" end="00:00:25">de disparitions au Sri Lanka.<:/p>

<:p begin="00:00:26" end="00:00:27.5">Il n'existe pas de chiffres,<:/p>
<:p begin="00:00:27.5" end="00:00:31">mais le nombre de cas que nous avons documentés<:/p>
<:/div>
<:/body>
<:/tt>


Using this feature, the Internationalization module (i18n), and some CCK configurations we were a able to have our video player automatically display subtitles to users browsing the site in a non-English language.

We began with node type called video with two CCK filefields. One is used to upload and store an FLV video file. The i18n module works by cloning a master node for each translation. Since the video file is identical for each language, we've configured the field to be synchronized among all translated nodes. The second file field will hold the Timed-Text XML document. This field should not be synchronized because each translation will need to reference a different file.

After you add a video node, create a translation and upload a subtitle file. There are various ways to pass the file to JW Player, but the important logic is "if there is a subtitle file attached, tell JW player about it." If you're just using the stand alone player to display one video at a time, a simple JavaScript call will suffice. Here is an example of subtitles in French.

We're using the SWFObject API module to display our JW Player, so adding the subtitle file is as simple as adding some JavaScript:

<?php

?>


The default name is so1, but remember to change that to target your JW Player instance. We worked this code into a CCK field formatter that allows you to change the display of the subtitle field to embed the JavaScript.

If you're using Playlists (we were), you should look at the XPFS playlist module. We've put this to use by overriding theme_xspf_playlist_list() and adding our own meta field for the caption file.