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. This use-case is supported for HLS, DASH & progressive download
  • In-manifest/in-stream closed captions for live and on-demand video:
    • HLS: CEA 608/708 - support for WebVTT is actively being worked on and will be added later in 2017
    • DASH: WebVTT & TTML

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


External WebVTT closed captions for on-demand video

Player settings

This section refers to the loading of external WebVTT files that can be fed to the player through player settings. WebVTT file parsing is done through vtt.js. As such we support all features supported by the vtt.js project. WebVTT files are ajax-loaded and as such appropriate CORS settings are expected for retrieval of WebVTT files.

ccFiles: Array

This setting holds WebVTT closed captions information to be displayed along the video within the player. Default: []. Multi-language WebVTT closed captions can be added to the player. 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.

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 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']
];

Browser support for external WebVTT closed captions in HTML5 video

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

In iOS the player will use the native HTML5 video track tag to render WebVTT captions.

Styling WebVTT closed captions through player settings

The following player settings are available to style WebVTT closed captions. Captions style will be ported to Google Cast when casting is available.

  • 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.85

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

The player shall 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.

In iOS where captions are not rendered with vtt.js but with the native HTML5 track tag the CSS rules being applied are different. See the bottom of cc.less source file for more information.

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/v4/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
// Our WebVTT closed captions
var ccFiles = [
  ['en', 'English', 'https://www.radiantmediaplayer.com/media/cc.vtt'],
  ['fr', 'Français', 'https://www.radiantmediaplayer.com/media/cc-fr.vtt']
];
// Our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  ccFiles: ccFiles,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

HLS & DASH embedded closed captions for live & on-demand video

Supported closed captions type

We support multi-language closed captions with HLS & DASH or HLS for the following caption types. Language information for the captions are directly read from the HLS or DASH manifest 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 differ from the external WebVTT closed captions approach that is described above.

  • HLS: CEA 608/708 - support for WebVTT is actively being worked on and will be added later in 2017
  • DASH: WebVTT & TTML

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

In-manifest closed captions are supported wherever HLS or DASH to HTML5 video are supported. See our compatibility table for more information.

Player code example

Following is a player code example for a DASH stream with embedded multi-language WebVTT captions.

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  dash: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd' 
};
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>