How to setup subtitles in video.js

Question

I am searching on internet about 3 hours ago and i am confused how to implement subtitles in video.js player.

I have add <track kind="subtitles" src="http://test.to/the-longest-ride.720p.BluRay.x264.YIFY.srt" srclang="en-US" label="English"></track> this code in my player and upload this subtitle file into my server comment ballon has appeared in my player menu but there is no subtitle showing.

And when i am searching i read that webvtt format will run :( but what about srt format or other and on runtime how will i implement and convert on webvtt format.

I also get this Video Js Caption Plugin i have read this documentation but i don't understand it well where to give link of subtitle.

Please help how to add subtitles and where should i start.

Thanks

Answer 1

Here is an example of how to add subtitles to a video:

https://jsfiddle.net/xrpnbwfz/1/

<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>

There are lots of sites that will convert your SRT to a WebVTT that will work for videojs: https://atelier.u-sub.net/srt2vtt/

Answer 2

I want to mention another way of adding tracks to video.js programmatically:

var videoOptions = {
        controls: true,
        responsive: true,
        autoplay: true,
        preload: 'metadata',
        sources: [{src: 'https://domain/myfile.m3u8', type: 'application/x-mpegURL'}],
        tracks: [{src: 'https://domain/mysub.vtt', kind:'captions', srclang: 'en', label: 'English'}]
      }
// create the player using the above options
videojs('my-player', videoOptions);

You can also add/remove/select the player tracks after creating the player, as explained here.