JW Player

Adding Video Captions

JW Player 6 supports the rendering of closed captions or subtitles in the video display. These captions can be selected by viewers through the CC popup menu:

JW Player with the CC menu visible

This guide explains how to add captions to your player embeds.

Supported Formats

JW Player 6 supports captions in three formats:

VTT captions are preferred, since they are part of the HTML5 standard. JW Player supports all three formats across all browsers though, in both Flash and HTML5 mode. JW Player does not yet support captions on mobile devices (Android/iOS), since it's not yet possible to render them. This limitation will be removed when these devices support Text Tracks natively.

Note JW Player also supports captions, embedded as inline TX3G data. These captions are only supported in Flash mode though, and only for the MP4 and RTMP formats. We advise publishers to not use this format, except for embedding Closed Captions in live RTMP streaming. See Using RTMP Streaming for more info.

VTT Example

Here is an example VTT file containing three caption cues. As you can see, this format is easy to understand and can be authored with a simple text editor:

WEBVTT

00:00:12,000 --> 00:00:15,000
What brings you to the land
of the gatekeepers?

00:00:18,500 --> 00:00:20,500
I'm searching for someone.

00:00:36,500 --> 00:00:39,000
A dangerous quest for a lone hunter.

00:00:41,500 --> 00:00:44,000
I've been alone for as long
as I can remember.

Note your VTT files should be saved using UTF8 encoding in order to correctly display special characters (accents, but also e.g. Arab, Chinese, Russian). If these files are not stored and served using UTF8 encoding, rendering issues will almost certainly occur.

Embedding Captions

WebVTT captions can be embedded in a player by adding a tracks object inside the playlist object. Every entry has 4 properties:

file (required)
URL to the WebVTT (or SRT/DFXP) file to display (e.g. /assets/myCaptions.vtt). Note these captions are subject to Crossdomain Security Restrictions, in both Flash and HTML5 mode.
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.
"default"
Set this to true 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.
kind
The kind of text track this is: captions. Since captions are the default, this option isn't required. It's good to add this property for readability though, since JW Player supports other track kinds (like thumbnails).

Here is an example setup, using one video and two VTT files. The English captions will render by default:

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

Note that VTT files are subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player. See Crossdomain File Loading for more info.

Captions in Feeds

When loading RSS Feeds into a player, captions can be included using a <jwplayer:track> or a <media:subtitle> element. Here is an example feed, containing the same video and two VTT tracks as above:

<rss version="2.0" xmlns:media="http://rss.jwpcdn.com/" > 
  <channel> 

    <item> 
      <title>Sintel</title>
      <description>Sintel is a fantasy CGI from the Blender Open Movie Project.</description>
      <jwplayer:image>/assets/sintel.jpg</jwplayer:image>
      <jwplayer:source file="/assets/sintel.mp4" />
      <jwplayer:track file="/assets/sintel-en.vtt" label="English" kind="captions" default="true" />
      <jwplayer:track file="/assets/sintel-fr.vtt" label="French" kind="captions" />
    </item>

  </channel>
</rss>

Styling the Captions

It is possible to change the styling of the captions using the captions options block of player setups. The following style properties can be set:

back
By default, a black background is displayed around the captions. Set this option to false, to discard the background and print a thin black outline around the captions instead. Note this outline will not be available on Internet Explorer 9 in HTML5 mode! It will in IE10 though.
color
Can be any hexadecimal color value, the default is FFFFFF.
fontsize
By default, the captions are displayed using a font size that fits 80 characters per line. Use this option to override this selection with a specific fontsize in pixels (e.g. 20). Note the captions are still scaled up during fullscreen playback.

Here is an example setup where the captions are set in 20px red without a background:

jwplayer("myElement").setup({
    playlist: [{
        file: "/assets/sintel.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{ 
            file: "/assets/captions.vtt"
        }]
    }],
    captions: {
        back: false,
        color: 'cc0000',
        fontsize: 20
    }
});

Inline Styling

JW Player 6 does not yet support WebVTT cue settings (line, position, size, etc.), nor most WebVTT cue objects (class, ruby, timestamp, etc.). They will not break playback, but are simply ignored. However, some basic HTML tags are supported:

Here is an example VTT file with a few cues containing inline styles:

WEBVTT

00:00:08.000 --> 00:00:10.000
<b>Nothing</b> is going on.

00:00:10.500 --> 00:00:12.500
<font color="#3333CC">Violet, <i>please</i>!</font>
- I am <font size="20" color="#FF0000"><u>not</u></font> your babe!

Note these HTML tags can also be used in SRT or DFXP files. DFXP-specific styling functionality is not supported though.