Videojs Captions Test

Captions test with Videojs with Nuevo plugin

Since video.js supports multilanguage text tracks in WebVTT format that work across all HTML5 browsers, also Nuevo skin was designed to display captions (CC) button and captions menu for language selection.
Once your WebVTT captions file ready you can easily add it to video tag using the track tag that you must put after all video source tags, eg.

Code snippet

<video id="example_video_1" class="video-js" controls preload width="960" height="428" poster="path-to-poster.jpg" controls playsinline>
 <source src="//domain.com/video_240.mp4" type="video/mp4" res="240" label="240p">
 <source src="//domain.com/video_360.mp4" type="video/mp4" res="360" label="360p">
 <source src="//domain.com/video_360.mp4" type="video/mp4" res="720" label="720p">
 <source src="//domain.com/video_360.mp4" type="video/mp4" res="1080" label="1080p">
 <track kind="captions" src="//domain.com/path/to/captions_de.vtt" srclang="de" label="German">
 <track kind="captions" src="//domain.com/path/to/captions_en.vtt" srclang="en" label="English" default>
 <track kind="captions" src="//domain.com/path/to/captions_fr.vtt" srclang="fr" label="French">
 <track kind="captions" src="//domain.com/path/to/captions_it.vtt" srclang="it" label="Italian">
</video>

Default captions font size is little bit bigger than video.js default (1.25). It is possible to set captions size through Nuevo plugin option.

Code snippet

<script>
  var player = videojs("my_player");
  player.nuevo({captionsSize:1.5;});
</script>

Alternative to <track> video element is adding tracks programmatically once nuevo plugin is loaded.

Code snippet

<script>
player.on('nuevoReady', function(){
  player.loadTracks([
    {kind:"captions",src:"//domain.com/path/to/captions_en.vtt", srclang:"en", label:English",default:"1"},
    {kind:"captions",src:"//domain.com/path/to/captions_de.vtt", srclang:"de", label:German"},
    {kind:"captions",src:"//domain.com/path/to/captions_de.vtt", srclang:"es", label:Spanish"}
   ]);
});

Captions are displayed at the bottom of the player. The distance from bottom is 2em or 4em when control bar is active (em unit means the size of the current font). You can change this values through css stylesheet rules:

.vjs-text-track-display {bottom: 4em;}
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {bottom: 2em;}

WebVTT "captions settings" panel has been completely redesigned to look best and fit every device for all Nuevo skins. On iOS devices subtitles are displayed natively, option to change subtitle style in not available. Nuevo plugin changes default subtitles background style from black to transparent and use raised font style. Still the user has an option to change the captions style through the captions settings panel.

Video.js has built-in support for CEA/CTA-608 captions carried in MPEG-DASH or HLS streams. This means that closed captions are automatically parsed out and made available to Video.js players for MPEG-DASH content and HLS streams.

In certain scenarios user may prefer to load webVTT captions manually instead of carrying it in video <track> element. Nuevo plugin public loadTracks method, described in Documentation.