Add captions (Web Player)

Add embedded or side-loaded captions to the HTML5 web player.

Captions provide your viewers synchronized text of the audio and non-speech elements of your video content. In addition, complimenting your video content with captions can have the following benefits:

  • Improved video SEO
  • Increased content retention
  • Increased engagement with autoplay content
  • Environment-independent content viewing
  • Legal compliance
955955

Screenshot of an English caption in a video.



Supported caption types

Captions can either be embedded in the video (embedded captions) or loaded from a separate file (side-loaded or sidecar captions). JWP's players support both types of captions.

๐Ÿšง

We strongly advise that you remotely self-host video content with embedded captions. If video content with embedded captions is uploaded to your JWP account, the embedded captions may be removed during the encoding process.


The following table lists common caption formats that are supported.

FormatTypeDescription
CEA-608 / CEA-708EmbeddedUsed in videos that originally were on broadcast television

Captions are included as part of the video content. These captions are styled according to the device's captions and subtitle settings that the viewer sets.
WebVTT (.vtt)Embedded or
Side-loaded
Common format used for online video

Captions can be embedded as part of a live stream or can be side-loaded as a separate file. WebVTT captions can include the caption, a description, and metadata information.

Your .vtt files should be saved using UTF8 encoding to prevent rendering issues.
SubRip Text (.srt)Side-loadedCommon format used for online video

SubRip Text captions only include the caption. Neither description nor metadata information can be included.
Timed Text Markup Languageย (.dfxp,ย .ttml, .xml)Embedded (DASH only)XML-based format used for online video

Currently, JWP supports ttml1 embedded in DASH streams.


Add captions to your video

JWP supports embedded and side-loaded captions. The following sections explain how to add each type of caption to your video.


Embedded captions

To add videos or streams with embedded captions to a player, use the following steps:

  1. Copy the URL of your video. The video must contain CEA-608, CEA-708, or in-manifest WebVTT captions.
  2. Define the file property of the playlist object with the URL of your video.

๐Ÿšง

Do not add videos or streams with embedded captions to your JWP library. The embedded captions tracks of the content may be removed during JWP's video transcoding process.



Side-loaded captions

  1. Within the playlist object for a specific video, create a tracks array.
  2. Create an unnamed object within the tracks array.
  3. Define kind with the value captions.
  4. Add the caption track URL (file) and language label (label).
  5. Repeat steps 2-4 for each additional caption track.
<script type="text/JavaScript">
  jwplayer("myElement").setup({ 
    "playlist": [
      {
        "file": "{video_url}",
        "tracks": [{
            "kind": "captions",
            "file": "https://www.yourdomain.com/caption-file_en.vtt",
            "label": "English"
          },   
          {
            "kind": "captions",
            "file": "https://www.yourdomain.com/caption-file_sp.vtt",
            "label": "Espaรฑol"
        }]
      }
    ]
  });
</script>

๐Ÿ”‘

As an alternative to the previous steps, you can add your captions files in your JWP dashboard.



Advanced caption behaviors

In addition to using the configuration options of setup() to add and customize captions, JWP offers additional captions API calls that allow you to further customize your viewers' experiences.