Videojs Captions Test

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/playlist.m3u8" type="application/x-mpegURL">
<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>

As one of our users rightly pointed out, there is a difference between closed captions and subtitles. Closed captions provide a full transcript of a video's audio, including dialogue and important sound effects, to aid accessibility for the deaf or hard of hearing. Subtitles are a translation of the spoken dialogue into a different language for viewers who don't understand the original language.
Unfortunately video.js does not differ these two options, and even if you can find subtitles svg icon among other videojs icons, it is never in use. You will always see closed captions icon (CC), captions settings, captions off menu options.
The Nuevo plugin distinct closed captions from subtitles. If you define text track(s) as subtitles, an appropriate subtitle icon will be displayed in the control bar. Related menu texts will refer to subtitles, not captions.

Click the button below to test the same video, the same text tracks but of subtitles kind.
Pay attention to the subtitles button and its menu.