Closed Captioning with Video.js

Adding Closed Captions to your videos in the Video.js player is easy with CaptionSync. Video.js is an open source HTML5 video player that allows video playback on web browsers and mobile devices. This tutorial provides step-by-step instructions on how to add captions to Video.js videos using CaptionSync's .VTT caption file.

Tutorial:

Submitting your Media for Captioning:

• Log into your CaptionSync account and go to Caption/Transcribe -> Advanced Settings. Under the Output Types tab, choose the .VTT output format.

• Make your Captioning request, using your video.

• Once results are available, download the .vtt file from the Results Email or the Submission Details Page.

Adding Captions to your Video.js video:

• Make your caption file available online via the same FTP server or online location where the media file is, and ensure the caption file is not password protected. Note that if you use a different source to store your caption file, you'll need to enable a Cross-Origin Resource Sharing or CORS.

• You'll now need to edit the JavaScript code for your Video.js video. Add the <track> tag containing your caption file information, between the <video> tags. E.g.:

<video id="bio_1" class="video-js"
    controls preload="auto" width="700" height="300"
    data-setup='{"example_option":true}'>
<source src="https://www.uni.edu/path/lectures/bio_1.mp4" type="video/mp4" />
<track kind="captions" src="http://www.uni.edu/path/captions/bio_1.2014.vtt" srclang="en" label="English">
</video>

• Next, you'll need to add a CC button to the player, in order to toggle captions on and off. So add the following HTML code to your video player page:

<link href="videojs-captions-toggle.css" rel="stylesheet">

<script src="video.js"></script>
<script src="videojs-captions-toggle.js"></script>
<script>
  videojs(document.querySelector('video')).captionsToggle();
</script>

• Save and publish these changes.

• The Video.js player should now display captions when you click the CC button.

Adding more than one Caption file to your Video.js video:

If you have caption files in more than one language, you can add a <track> tag for each language you will make available. Then add the default attribute to the language you wish to display when the video starts playing. E.g.:

<track kind="captions" src="http://www.uni.edu/path/captions/bio_1.2014.vtt" srclang="en" label="English" default>
<track kind="captions" src="http://www.uni.edu/path/captions/bio_1.sp.2014.vtt" srclang="es" label="Spanish">
<track kind="captions" src="http://www.uni.edu/path/captions/bio_1.fr.2014.vtt" srclang="fr" label="French">

To request caption files for your media in other languages, you just need to follow our Translation workflow, and then add them to the video, like detailed above.

Forcing the captions to display by default in your Video.js video:

You can force captions to display by default when the video starts playing. The visibility of the track can be changed using the mode method. This will make the captions visible by default, without having to click the CC button. E.g.

let tracks = player.textTracks();

for (let i = 0; i < tracks.length; i++) {
   let track = tracks[i];

   // Find the track in English
   if (track.kind === 'captions' && track.language === 'en') {
      track.mode = 'showing';
   }
}   

More information about closed captioning with Video.js is available in their Text Tracks tutorial.