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.

Dealing with abandoned translation groups

  1. If you’re member of a translation team where suggestions aren’t approved, write a post to the translation group’s board and volunteer to help approve suggestions.
  2. If the admins don’t respond, write a post to the board and volunteer to help as an admin. Send an email to the current admins, pointing to that post. Wait two weeks.
Subscribe with RSS Subscribe to RSS - translations