JW Player Captions

Jun

JW Player 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&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!

Tagged as: captions, flash, jw player, stream, translate, video

git commit -a