captioning books

YouTube: Captioning Someone Else’s YouTube Videos Using JWPlayer

We’ve had articles about this topic in our CaptionSync Support Center knowledge base for quite awhile, but recently we had a request from our friends at WebAIM to make a publicly available post about the process that could be shared with people who don’t have a CaptionSync account. I think that’s an excellent idea, and I have to apologize for not getting this posted sooner.

Captioning your own YouTube video is pretty straight-forward. But YouTube does not allow you to add a caption file if you are not the video owner. Fortunately, there is a work-around for this. JW Player provides a nice way of adding captioning to any YouTube video. This tutorial shows you exactly how to do this.

If you are creating your own video content and publishing it on YouTube, it is relatively straightforward to add closed captions by uploading a caption file and associating it with the video. But YouTube does not allow you to add a caption file if you are not the video owner. Fortunately JW Player from LongTail Video provides an easy way to add captions to any YouTube video. This tutorial walks you through the steps required to display closed captions for videos on YouTube, using JW Player and closed caption files in DFXP (sometimes referred to as TTML) format.

Requirements:

To use this method you need just two things: JW Player version 6.0 or higher installed on a webserver, and caption file(s) in either DFXP or SRT format, stored on the same webserver. Download and installation instructions for JW Player can be found here.

Embedding Videos with Closed Captions:

  1. Upload the caption file that you have created for the video to the same webserver where you installed JW Player. You may want to have a separate subdirectory for all of your caption files.
  2. Create an embed code, that references your instance of JW Player, the YouTube video that you have captioned, and the caption file.
  3. Save the embed code on a web page on your website or learning management system.

Here is an example:

<script type="text/javascript" src="http://uni.edu/jw/jwplayer.js">
</script>
<div id='mediaplayer'></div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
     width: 480,
     height: 360,
     controlbar: "bottom",
     playlist: [{
        captions:
          [{file: "http://uni.edu/jw6/captions/nbc.dfxp.xml", 
             label: "English"}],
        file:"http://www.youtube.com/watch?v=-spgUfGFTSY"
     }]
});
</script>

The three portions highlighted in Bold and Italic should be replaced with URLs specific to your installation and the particular video and caption file:

  • jwplayer.js: The URL to the jwplayer.js file, installed as part of your JW Player installation.
  • file: The first file parameter should be replaced with the URL to the caption file created for this video. The second file parameter should be replaced with the URL to the YouTube video. Note that the caption file should be on the same webserver as the JW Player files. If they are not, you will need to use a crossdomain.xml file, as explained here on the Caption Plugin Reference Guide.

Once you have JW Player up and running on a webserver and your initial video displaying with captions, captioning other YouTube videos can be accomplished very simply by submitting the video to CaptionSync, uploading the caption file to your web server, and creating a new embed code with references to the YouTube video and the caption file.

If you are doing a lot of these I can envision some extensions to this that would make the process easier for your users who are captioning these videos and using them in courses or on their own web pages:

  1. You could create an upload form that allows an authenticated user to upload a caption file to your server.
  2. Users could paste in a YouTube URL, and any other desired parameters such as video width and height, and you could generate a formatted embed code like the example above for them to paste into their page.

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>