Using JW Player 7 with YouTube Videos

At no additional charge, CaptionSync has the ability to show captions on someone else's YouTube videos via the CaptionSync Smart Player when a Transcription/Captioning request is made via our List of URLs feature. Learn how to use this feature in our Smart Player tutorial.

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

Tutorial

Requirements:

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

Note: We previously published How-To tutorials showing this process with JW Player 5.6 and JW Player 6. The feature works with version 7.x as well, but the embed code is different, as shown below.

Embedding Videos with Closed Captions:

1. Upload the .2014.vtt caption file that CaptionSync generated for your media 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. Captions are embedded in JW Player by adding a tracks object inside the playlist object.
3. Save the embed code on a web page on your website or learning management system.

Here is an example of the embed code using multiple languages - English and French. The English captions will render by default:

<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: [{
        file: "http://www.youtube.com/watch?v=-spgUfGFTSY",
        image: "http://uni.edu/jw7/assets/movie.jpg",
        tracks: [{ 
            file: "http://uni.edu/jw7/captions/movie-en.2014.vtt", 
            label: "English",
            kind: "captions",
            "default": true 
            },{ 
            file: "http://uni.edu/jw7/captions/movie-fr.2014.vtt", 
            kind: "captions",
            label: "French"
        }]
    }]

});
</script>

The 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 your video file. Subsequent file parameters within the tracks object should be replaced with the URL to the caption file created for the 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 in this article about Crossdomain File Loading.
• label: A human-readable name of the captions track (e.g., English Captions). This is displayed in the captions selection menu if more than one track is provided.
• kind: The kind of text track - e.g., caption. Since captions are the default, this option isn't required. It's good to add this property for readability though, since JW Player supports VTT files which reference thumbnails.
• default: Set this to true for the default language, and if you want these captions to display on startup. If you don't set it, the captions are Off by default and users have to enable them using the CC menu. Note the option should be placed in quotes because default is a reserved JavaScript keyword in IE8.

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.