Video.js (HTML5 Video Player) - Add Captions or Subtitles

I recently attempted to add multi-language subtitles to videos displayed directly on certain pages of a Drupal site. We were already using the video.js module to handle the viewing of these video files, and the module page noted that it now supported captions/subtitles tracks, but it wasn't immediately clear how to upload and associate multiple WEBVTT files (the standard supported for subtitles or captions). After a bit of reading and digging around through comments, I found that this is actually quite easy.

If you use the video.js module for your videos, you should have already created a content type and field of type "file" to allow for the upload of the video file you wish to display. You should have also changed the display format to use the video.js format if you want to display these videos inline on your site. Assuming these steps are already completed, and you are able to view uploaded videos on your site using this module, adding in captions or sub-titles is very easy:

Ensure the video file field is configured to allow unlimited (or at least more than one) values. This will allow you to upload more than one file to the same filed on a given form instance. While you are in there, ensure that the .vtt extension is an allowed file extension to upload in your form.

Drupal 7 - How to Build a Drupal 7 HTML5 Video Subtitling/Closed-captioning System


Why might you want to close-caption or subtitle video content on your site? Well, one reason for subtitling is to provide fully functional internationalization/localization capabilities. One of the many reasons Drupal is the CMS of choice is because of its robust multilingual support. If you are posting multilingual text content on your site, multilingual support can and should extend to all content, including video, through the use of subtitles.

Many visitors to your site—regardless of whether or not your content is internationalized—may use a screen reader or require the use of text captions where audio is used within video to convey information. It is therefore a reasonable accessibility accommodation in many cases to provide closed captions where video is an essential component of your site.

A third use case involves a site where video is used to demonstrate a process in detail, but where audio description is too expensive, time consuming, or creates significant localization challenges. I have a site where I have hundreds of separate videos, all with stepwise descriptions for completing maintenance or troubleshooting procedures. I needed the non-technical end-user to be able to upload the video and add subtitle text in the node edit page.

Subscribe with RSS Subscribe to RSS - WEBVTT