Videojs WebVTT Captions Test

WebVTT 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 vjs-default-skin" 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>

For Nuevo skins "captions settings" panel has been completely redesigned to look best and fit every device. Default videojs panel style in not perfect, may lead to wrong display, especially on small mobile devices. 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.

Detailed information about WebVTT tracks support n video.js player you can find on http://docs.videojs.com/docs/guides/tracks.html