JW Player: Add Closed Captions to Your JW Player

The JW Player is one of the most popular open-source media players. It’s easy to set up and it supports many different media formats. It’s also very extensible through a library of plugins that includes a captions plugin for accessibility. This article shows you how to use the JW captions plugin to add closed captions to your JW Player with the help of 3Play Media.

First you will have to set up your JW Player if you haven't done so already.
See more information on setting up your JW Player

The instructions below are based on the JW Player, version 5.5.
If you’re using a different version, you can find additional instructions on the JW Player website.

The captioning workflow can also be completely automated by using the 3Play Media APIs and the JW APIs.

Before downloading captions from your 3Play Media account you may want to first configure DFXP as one of your favorite formats. Once saved as a favorite format the DFXP format will be one of the default format options when performing quick downloads. 

See more information on configuring your Favorite Format settings.

Follow the steps below to get started...

 

Step 1- Log into your 3Play Media account

3Play Media login

 

Step 2- Select your file

Select the file you want to download from your list of files.  Click the file's name to open the file level actions menu.

Select file to download

 

Step 3- Click Quick Download

Click on the Quick Download button and select WEBVTT.

Click Quick Download

 

Step 4- Configure the JW captions plugin

The JW captions plugin, like all JW plugins, does not need to be downloaded or installed. To use the plugin all you have to do is modify the player’s embed code to include references to the captions plugin and the URL of the WEBVTT captions file. Below is an HTML example of the embed code with captions added.

 

The first field is the Playlist, which is the info for the video.  Under File, enter the name of your video.  Under Image, this is an optional image you can use as a placeholder that shows up when you first load the video before it is played.

The next field is the Tracks.  This is the info for the captions.  Under File, enter the info for the caption file.

jwplayer("myElement").setup({
    playlist: [{
        file: "/assets/NAME_OF_YOUR_VIDEO.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{ 
            file: "/assets/YOUR_CAPTION_FILE_NAME_captions-english.vtt", 
            label: "English",
            kind: "captions",
            "default": true 
        },{ 
            file: "/assets/YOUR_CAPTION_FILE_NAME_captions-french.vtt", 
            kind: "captions",
            label: "French"
        }]
    }]
});

Pro Tip: If you have multiple languages for a video, you can add all the WEBVTT files to the HTML code by following the example above.  The option to change the language will be available upon playing the video.

Choose Captions JW Player 6

For additional information about configuring the JW captions plugin, see the setup instructions and support documentation.

 

Step 5- Publish your new embed code

After publishing the modified embed code on your site, you will be able to turn the captions on/off by pressing the CC button.

JW Player Closed Captions

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk