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, e.g.
<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>
<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"} ]); });