Add Subtitles and Captions Using WebVTT in JavaScript

Adding subtitles and captions to your video content can greatly enhance accessibility and user engagement. Web Video Text Tracks Format (WebVTT) is a widely used format for displaying subtitles, captions, and other text formats with media files such as video and audio. In this article, we will explore how you can add subtitles and captions to your HTML5 videos using WebVTT in conjunction with JavaScript.

What is WebVTT?

WebVTT is a text format for displaying timed text tracks (subtitles, captions) in connection with media presentations. It allows you to overlay timed text on your video or audio files in a synchronized manner. It makes videos more accessible to a wider audience, including those with hearing impairments and those who speak different languages.

Creating a WebVTT File

Before we delve into using JavaScript to integrate captions, you first need to create a WebVTT file. This file contains a sequence of text entries which specify the text displayed, along with timing information.

WEBVTT

00:00:00.000 --> 00:00:04.000
Welcome to our video tutorial.

00:00:05.000 --> 00:00:10.000
Today we are going to learn about WebVTT.

The starting line WEBVTT signals the beginning of the file. Each subsequent set of timestamps indicates when a piece of subtitle text should appear and disappear. The format is HH:MM:SS.MMM for hours, minutes, seconds, and milliseconds.

Adding the WebVTT File to HTML

To add your WebVTT file to a video, you should first make sure that your HTML5 video tag includes a track element that points to your WebVTT file.

<video id="video" controls>
  <source src="movie.mp4" type="video/mp4">
  <track id="subtitle_track" label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default>
  Your browser does not support the video tag.
</video>

In the track element:

• label: a human-readable title for the track.
• kind: represents track’s purpose. Available options are subtitles, captions, descriptions, etc.
• srclang: indicates the language of the track text.
• src: the URL of the WebVTT file.
• default: sets the track as the default choice if multiple tracks are available.

Manipulating Tracks with JavaScript

While the track element is perfect for simple use cases, JavaScript allows for more advanced track manipulation.

const video = document.getElementById('video');
const track = video.textTracks[0]; // Get the first text track

track.mode = 'showing'; // Ensure the track is visible

track.addEventListener('cuechange', () => {
  const activeCue = track.activeCues[0];
  if (activeCue) {
    console.log('Current Subtitle: ' + activeCue.text);
  }
});

Here we access the text track through the textTracks collection on the video element. The cuechange event triggers every time the active cues for the track change, making it useful for responding to captions appearing or disappearing.

Conclusion

Using WebVTT and JavaScript together can make your video content both more accessible and more dynamic. While this setup covers basic implementation, many custom options and features are available to creative developers, including multiple language support and interactive subtitles.