Subtitles and Closed Captions in THEOplayer

THEOplayer supports rendering of subtitles and closed captions in both live and VOD content via the WebVTT format. You can supply subtitles and closed captions to THEOplayer in WebVTT format either externally via the <track> element or embedded inside the HLS stream.

Subtitles and Captions via the <track> element

THEOplayer has support for the HTML5 track element. When embedded as a child of the corresponding video element, it lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.

By default the track element has support for different kinds of data, set in the kind attribute of the element. THEOplayer has support for captions and subtitles.

Attribute Required Description
src   Specifies the URI of the data that has to be loaded in the element.
default (optional) When set to "default" the track element will be the one shown by default when video playback starts.
kind (optional) Specifies the kind of track information embedded in the element. THEOplayer has support for the "subtitles" and "captions" value.
label (optional) Specifies a label that is displayed in the selection menu of the control bar when more than one track is provided.
srclang (optional)

A country code value specifying the language of the data in the track element.

Embedded WebVTTs in the HLS playlist

Apart from specifying the WebVTT file in the track element, THEOplayer has support for WebVTT captions and subtitles embedded in the HLS m3u8 manifest file.

Examples

HTML5 media element with a HLS manifest and a WebVTT captions track

Example code for setting up a HTML5 video element for THEOplayer, with a HLS manifest and a WebVTT captions track element.

<video class="video-player" src="http://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8" controls="controls" poster="http://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg">
<track src="subtitles-en.vtt" label="English subtitles" kind="captions" srclang="en" default=""></track>
</video>

HTTP Live Streaming Manifest with embedded WebVTT subtitles

The following is a root HLS manifest with English, French, Spanish and Japanese subtitles. THEOplayer will handle and parse the required subtitles and synchronize them with the stream.

#EXTM3U 
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",CHARACTERISTICS="public.accessibility.transcribes-spoken-dialog, public.accessibility.describes-music-and-sound",URI="subtitles/eng/prog_index.m3u8" 
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Français",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="fr",CHARACTERISTICS="public.accessibility.transcribes-spoken-dialog, public.accessibility.describes-music-and-sound",URI="subtitles/fra/prog_index.m3u8" 
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Español",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="es",CHARACTERISTICS="public.accessibility.transcribes-spoken-dialog, public.accessibility.describes-music-and-sound",URI="subtitles/spa/prog_index.m3u8" 
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="日本語",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="ja",CHARACTERISTICS="public.accessibility.transcribes-spoken-dialog, public.accessibility.describes-music-and-sound",URI="subtitles/jpn/prog_index.m3u8" 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1860000,RESOLUTION=960x540,CODECS="avc1.42c01f,mp4a.40.2",SUBTITLES="subs" 
gear1/prog_index.m3u8

Support Table

This feature is supported on all browsers supported by THEOplayer.

Internet Explorer 10+

Internet Explorer 10+

Firefox

Firefox

Chrome

Chrome

Safari

Safari

Opera

Opera

Edge

Edge

Windows Phone

Windows Phone

Android

Android

iOS

iOS

Vivaldi

Vivaldi