Part12 - VideoJS Adding Subtitles

VideoJS supports WebVTT (.vtt) format. You can convert your subtitle files to vtt format from the following link.

https://atelier.u-sub.net/srt2vtt/

 

Upload your subtitle files and add these lines into video tag on your html page.

 

<video id="my_video_1" class="video-js facebook-skin vjs-big-play-centered" width="640px" height="267px" controls preload="none" poster='https://video-js.zencoder.com/oceans-clip.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>

<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />

 <track kind='captions' src='sample.vtt' srclang='tr' label='Turkish' default />

 <track kind='captions' src='sample2.vtt' srclang='en' label='English' />

  </video>

 

This is how it looks:

 

 

It works but I dont like the caption menu's font size. Lets change this and have a smaller font on this menu. Right click on the menu and select Inspect.

Now we found that that font setting is coming from video-js.min.css and it is under vjs-menu li section.

I modified font-size from 1.2em to 0.8em

 

Now it looks better

© selimatmaca.com. All Rights Reserved.