Radiant Media Player

Closed captions and subtitles documentation



Scope of support

Radiant Media Player supports multi-languages closed captions (or subtitles) in the following formats:

External WebVTT closed captions for on-demand video. WebVTT files are passed to the player through player settings.

  • HTML5 video: HLS, MPEG-DASH, MP4 & WebM progressive download
  • Flash video: HLS

In-manifest/in-stream closed captions for on-demand or live video:

  • HLS to HTML5 video (MSE-based): CEA 608 & CEA 708
  • MPEG-DASH to HTML5 video: CEA 608, WebVTT, TTML or EBU-TT-D

Captions can be customised with CSS or player settings to better fit your project requirements.


External WebVTT closed captions for on-demand video

This section refers to the loading of external WebVTT files that can be fed to the player. Since Radiant Media Player 3.10 WebVTT parsing is done through vtt.js for the HTML5 player. As such we support all features supported by the vtt.js project. WebVTT files are ajax-loaded for the HTML5 player and as such appropriate CORS settings are required for retrieval of the WebVTT files. In Flash proper crossdomain settings are also expected.

HTML5 Flash
ccFiles: Array

This setting holds WebVTT closed captions information to be displayed along the video within the player. This setting is only supported for on-demand video streaming. Default: [].
Radiant Media Player supports multi-language WebVTT closed captions in both HTML5 and Flash video. Example:

var ccFiles = [
  ['en', 'English', 'https://www.radiantmediaplayer.com/media/cc.vtt'],
  ['fr', 'Français', 'https://www.radiantmediaplayer.com/media/cc-fr.vtt']
];
ccFiles[i]: Array

ccFiles[i][0] is the ISO 639-1 (two-letter) code for the closed captions language
ccFiles[i][1] is the human-readable label for the closed captions language (this information will be displayed within the player captions menu)
ccFiles[i][2] is the WebVTT closed captions file location for player. This must be a fully qualified URL.

For WebVTT closed captions in HTML5 video, it is possible to set a default attribute to a specific caption track. This will cause the related caption track to be activated by default when the player loads. Example:

var ccFiles = [
  ['en', 'English', 'https://www.radiantmediaplayer.com/media/cc.vtt'],
  ['fr', 'Français', 'https://www.radiantmediaplayer.com/media/cc-fr.vtt', 'default']
];

This default attribute is not supported in Flash video and will be ignored.

Browser support for external WebVTT closed captions in HTML5 video

All browsers/devices listed in our compatibility table are supported for WebVTT rendering.

On iOS and macOS Safari the player will use the native HTML5 video track tag to render the captions.

Browser support for Flash external WebVTT closed captions

Flash 11.5+ with HLS

We only support a limited subset of the WebVTT specification in Flash, please take note the following items:

  • Time format must be HH:MM:SS.ms or MM:SS.ms
  • <i>, <b>, <u>, <c>, <ruby> tags will not have any effects and text will render without being affected
  • Blank new line in text will cause following text to be skipped until next timestamps
  • Voice tag will be ignored and text will render without being affected
  • Region-related features for WebVTT
  • WebVTT identifier, when used, must use consistent naming throughout the files
  • Positioning of WebVTT closed captions in Flash is not supported with the line and other related attributes. These attributes will be ignored by the Flash player and the captions will automatically be positioned.

Styling WebVTT closed captions through player settings

The following player settings are available to style WebVTT closed captions. Those settings will work for HTML5 & Flash video and also for tuning WebVTT captions while casting on a Google Cast device.

  • ccFontSize: the captions font size in pixels - Number, default to -1 which means auto-guess
  • ccFSFontSize: the captions font size in pixels when in full screen mode - Number, default to -1 which means auto-guess
  • ccTextColor the captions text color - Hex code as String, default to 'FFFFFF'
  • ccBackgroundColor the captions background color - Hex code as String, default to '000000'
  • ccBackgroundAlpha the captions background opacity - Number, default to 0.8

Styling & positioning of WebVTT closed captions through information embedded in the WebVTT file

In HTML5 video the player will honor any standard-compliant styling & positioning information that are held within the WebVTT file (position, line, italic or bold tags ...).

Styling WebVTT closed captions with CSS

In HTML5 video captions are rendered above the video tag. This is the CSS layout structure:

.rmp-container > .rmp-content > .rmp-cc-area > .rmp-cc-container > .rmp-cc-display > .rmp-cc-cue

Refer to the CSS information in the self-hosted player files package for further details on CSS applied for each section.

On iOS & macOS Safari where captions are not rendered with vtt.js but with the native HTML5 track tag the CSS applied is different. It can be identified in the CSS source files by the -webkit-media-text* prefix.

Player example

Player code for the above example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
// Then our closed captions: HTML5 + Flash with WebVTT
var ccFiles = [
  ['en', 'English', 'https://www.radiantmediaplayer.com/media/cc.vtt'],
  ['fr', 'Français', 'https://www.radiantmediaplayer.com/media/cc-fr.vtt']
];
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  skin: 's4',
  ccFiles: ccFiles,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

In-manifest/in-stream closed captions with MPEG-DASH or HLS for on-demand and live video

HTML5

Supported closed captions type

We support multi-language closed captions with MPEG-DASH or HLS to HTML5 video (MSE-based) for the following caption types. Language information for the captions are directly read from the MPEG-DASH or HLS manifest/stream and automatically displayed on the player when detected. Note that in this case captions are always rendered with the native HTML5 track tag and as such browser support and styling options may vary from what is available with the external WebVTT closed captions approach that is described above.

  • CEA 608: MPEG-DASH & HLS
  • CEA 708: HLS
  • WebVTT: MPEG-DASH
  • TTML: MPEG-DASH
  • EBU-TT-D: MPEG-DASH

Browser support for in-manifest/in-stream closed captions

In-manifest/in-stream closed captions are supported wherever MPEG-DASH or HLS to HTML5 video is supported. See our streaming documentation for a more information.

Player code example

Following is an example for an MPEG-DASH stream with embedded multi-language CEA 608 captions.

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  dash:'http://vm2.dashif.org/dash/vod/testpic_2s/cea608_and_segs.mpd' 
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>