This demo shows the Bitmovin Player displaying a video with captions and offering all the controls necessary to be compliant with CEA-708
This shows the Bitmovin Player and a stream with captions. Through the UI you can update many settings on how the captions are displayed
demo.js
js
var conf = {
key: '<YOUR PLAYER KEY>'
};
var source = {
dash: 'https://cdn.bitmovin.com/content/assets/sintel/sintel.mpd',
hls: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
poster: 'https://cdn.bitmovin.com/content/assets/sintel/poster.png'
};
var playerContainer = document.getElementById('player-container');
var player = new bitmovin.player.Player(playerContainer, conf);
player.load(source);
Bitmovin closed captions and subtitles support
The Bitmovin adaptive HTML5 video player supports a wide range of closed captions formats. With each of them it's possible for your viewer to adapt the display options, their preferences will be stored. For more information about all the supported options head over to the tutorial section.
Where to find the additional settings
The small gear icons next to the subtitles menu point gives you access to the menu with all settings.
Configuration options
Here you can see the different options the player offers:
- Font Size & Font Family: control the font display, font-families uses your browser font to follow CEA-708 precepts
- Font Color: some videos may have content too similar to the font color - change it here, default is white
- Character edge: allows you to change the border of the font to improve readability when needed
- Background Color & Background opacity: You can define a color to be displayed in the back of the subtitle text and it's opacity. Default is black with 0% opacity (completely transparent)
- Window Color & Window Opacity: Offers to create a window stretching over all of the videos width and contains the subtitles and the ability to control its transparency. Default is black at 0% opacity (completely transparent)
