Live Streaming

Part12 – VideoJS Adding Subtitles

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

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='' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>

<source src="" type='video/mp4' />

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

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


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

Post Comment