Live Streaming

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

Post Comment

Scroll Up