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 6.
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.
Step 1- Log into your 3Play Media account
Step 2- Download the VTT file format
Click the file's name to open the file level actions menu. Next click the Quick Download button and from the drop down menu that appears select WEBVTT.
If WEBVTT is not a default format, click +Add favorite formats.
See more information on Favorite Formats.
Step 3- JW Player Publish Wizard
Head over to JW Player website and if you do not have an account, sign up, it's free.
Next go to JW Player's Publish Wizard page.
Here you have some options. We will take a look at the first option, which is to use a link to the video that is currently on your website.
Enter the link to the video on your website under Media File. Where it says Poster, you may also include a JPG or PNG preview image that will show up before you press play on the video. Finally where it says Media Title, enter a title for your video, this will show up inside the play button before you press play.
Next hit Publish which will bring you to the Configure Your Player page. There are a range of options here, most of which are skins that are grayed out, but can become available if you sign up for premium service. Choose your appropriate options and click Get Embed Code.
Poof! You have the code for your video! On this page the instructions are pretty straight forward. Simply copy your unique code into the appropriate places of your website's code. Note: the File, Image, and Title in the example is for a SAMPLE code, unique to the video uploaded for this tutorial. Your code will be different.
Step 4- Adding Captions to JW Player
Next step is to make sure your WEBVTT caption file is online and in the right place. The best practice is to put the caption file in the same folder as your video on your server. Your video code should look something like this:
<div id='YOUR UNIQUE DIV ID HERE'></div>
<script type='text/javascript'>
jwplayer('YOUR UNIQUE CODE HERE').setup({
file: 'EXTENSION TO YOUR VIDEO e.g.- work/videos/sample_video.mp4,
image: 'EXTENSION TO YOUR IMAGE e.g.- work/videos/sample_video.jpg',
title: 'YOUR TITLE',
width: '100%',
aspectratio: '16:9',
To add the captions, copy and paste the following code BELOW the "aspect ratio" line.
Notice below how the Default Caption is set to English.
tracks: [{
file: "EXTENSION TO YOUR CAPTIONS e.g.- work/videos/sample_english_video_captions.vtt",
label: "English",
kind: "captions",
"default": true}]
});
</script>
If you have subtitle files, add them to the same location as your english captions similar to the example below.
Note: the sample caption names will be unique to your own caption WEBVTT files.
files. tracks: [{
file: "EXTENSION TO YOUR CAPTIONSe.g.- work/videos/sample_english_captions.vtt",
label: "English",
kind: "captions",
"default": true},{
file: "EXTENSION TO YOUR CAPTIONSe.g.- work/videos/sample_french_captions.vtt",
kind: "captions",
label: "French",},{
file: "EXTENSION TO YOUR CAPTIONSe.g.- work/videos/sample_german_captions.vtt",
kind: "captions",
label: "German",},{
file: "EXTENSION TO YOUR CAPTIONSe.g.- work/videos/sample_spanish_latin_captions.vtt",
kind: "captions",
label: "Spanish",},{
file: EXTENSION TO YOUR CAPTIONSe.g.- work/videos/sample_japanese_captions.vtt",
kind: "captions",
label: "Japanese",}]
});
</script>
Notice how the default language is English. Add:
"default": true
to the language you want to set as the default. Default language should only be defined once.
Step 5- Publish and Preview
Once your embed code is published, it's time to preview your video and you captions/subtitles. To view all available languages, hover over the CC Button.
