Captioning Your Videojs Videos

For a little change of pace, I thought it might be fun to do a write up on adding captions to an open source video player. Using Dotsub’s API, adding captions to most players is dead simple.

I decided to use videojs’s HTML5 player for this demo. Video.js is a great player and comes with built in subtitle support. This support is provided by HTML5’s track element. Dotsub’s API allows you to directly access various subtitle formats. Video.js uses WebVTT files which we can fetch from the Dotsub API using this URL pattern:

https://dotsub.com/media/<video_id>/c/<language_code>/vtt

This will fetch the WebVTT file for your video directly from our servers. We, by default, enable CORS on all WebVTT file requests, so you do not have to worry about same-origin policy issues.

Adding captions to a video player then only requires a track tag for every language you want to add. A simple player like:

<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"' />
</video>

Becomes caption enabled by simply adding:

<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/eng/vtt' srclang='en' label='English' default />
<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>

Now you have a beautiful video.js player that supports captions:

 управление контекстной рекламойчитать чужую переписку в вк