JW Player with captions

JW Player with captions


Captions are a great way to offer multi-lingual media content on your site, but they don't seem easy to add right? Well with the right tools and guidance, it will be very easy:

Setting everything up:

In order for captions to work flawlessly on every major browser, we will be using JW Player version 4.5 (At the time of writing, version 5 and 5.1 don't seem to work well in Internet Explorer)

Once you have that version ready, add the following Flashvars:

 
<param name="flashvars" value="plugins=captions-1&amp;captions=/captions.xml" />
 

Of course you may leave all the other Flashvars you had before (Specially file ;) )

The XML file:

Now that the player is ready, we need to setup the XML file with the captions, so create captions.xml and write the following:

 
<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:00" end="00:00:4">Subtitle 1</ p>
<p begin="00:00:4" end="00:00:6">Subtitle 2</ p>
<p begin="00:00:10" end="00:00:12">Subtitle 3</ p>
    </div>
 
  </body>
</tt>
 

As you can see, all we need is to change the Subtitle text, and the begin and end times of each, to set those up.

Generate the XML file with PHP:

If you want to change the language dynamically, you could use PHP to generate the XML using the following headers:

 
header("Content-type: text/xml");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past (no cache)
// And now all the XML data as before
 

If you want to learn how to easily translate your website read my article on that too!

Hope you found this useful!