Adding Closed Captions

JW Player 7 supports the rendering of closed captions or subtitles in the video display. These captions can be selected by viewers through the CC button. Here is an example, using a single language. The CC button then acts as a toggle:


For multiple languages, the CC button will show a language selection menu. Click here to load multiple languages for above example video (or toggle back to single CC).

Supported Formats

JW Player 7 currently supports captions in three formats:

  • WebVTT, a plain text format that's part of the HTML5 standard.
    VTT is required to render tracks on iOS Fullscreen
  • SRT, a plain text format that's popular amongst file sharers.
  • DFXP, an older XML-based captions format.

Note that captions are not supported when using Youtube content

VTT captions are strongly preferred, since they are part of the HTML5 standard and will work across more browsers (Namely iOS in full screen). JW Player supports both formats in non-fullscreen in both Flash and HTML5 modes. As of JW 7.3, playback in fullscreen on iOS can be accomplished when using VTT captions. The player will intelligently attach a VTT track element when Safari is detected.

Note JW Player also supports captions embedded in the stream for HTTP Live Streaming. See CEA-608 Closed Captions in HLS for more info.

If you are seeing "Unknown Captions" during HLS Playback on iOS, your manifest may need to be edited. Please see this article from Apple for more information.

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:


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. If these files are not stored and served using UTF8 encoding, rendering issues will likely 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.
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.
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.
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 VTT files which reference thumbnails.

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

var playerInstance = jwplayer("myElement")
    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 feeds or playlists into a player, captions can be referenced 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="" > 

      <description>Sintel is a fantasy CGI from the Blender Open Movie Project.</description>
      <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" />


Did you find this article helpful?

Please log in to rate this article.