Videojs Captions Test

Captions test with Videojs with Nuevo plugin

Video.js supports WebVTT subtitles and closed captions both via the element on the website and embedded WEBVTT subtitles directly in the HLS manifest. CEA-608/708 captions are automatically detected when they are present in the stream.
Once your WebVTT captions file is ready, you can easily add it to the video tag using the track tag that you must put after all video source tags, e.g.

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_730.mp4" type="video/mp4" res="720" label="720p">
<source src="//domain.com/video_1080.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>

An alternative to <track> video element is adding tracks programmatically once the video is loaded.

Code snippet

<script>
player.on('loadeddata', 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"}
]);
});
</script>