How To Add Subtitles To A Video

(Many of the links in this article redirect to a specific reviewed product. Your purchase of these products through affiliate links helps to generate commission for Techsplurge.com, at no extra cost. Learn more)

Understanding the Basics of Video Captioning

Adding subtitles to a video enhances accessibility and engagement. Captions represent audio content, including dialogue, music, and sound effects. They are beneficial for viewers who are deaf or hard of hearing, and those who prefer watching videos with the sound off.

HTML5 uses the <track> element to add captions and subtitles. This element supports multiple tracks, including captions, subtitles, chapters, descriptions, and metadata. Each track can be in a different language, allowing viewers to choose their preferred language.

Creating a WebVTT Caption File

The first step involves creating a WebVTT (Web Video Text Tracks) caption file. This file contains the text of the speech and sounds with corresponding timestamps.

Format

The WebVTT format is a text file with a .vtt extension. The file begins with a header “WEBVTT FILE” followed by cues and their corresponding text.

Example

A sample WebVTT file might look like this:

WEBVTT FILE

1 00:00:10.500 –> 00:00:13.000
NARRATOR: In a world where nothing is what it seems,
2 00:00:15.000 –> 00:00:18.000
one man is about to do the impossible.

Creating the File

You can create a WebVTT file using a text editor or convert an existing caption file. Submitting your video for transcription and captioning to a professional captioning company is the easiest way.

Uploading the Caption File

After creating your WebVTT caption file, upload it to the same folder as your video. This ensures the video player can locate the caption file and display the subtitles correctly.

Adding the Track Element to Your Video's HTML Code

To display captions in your HTML5 video, add a <track> element to your video's HTML code.

HTML Markup

Open your website’s HTML editor and view the code for the video needing captions.

Track Element

Add a <track> tag with the following information:

• src: The URL location of the caption file on your server.
• label: The title of the track as it displays for the viewer.
• kind: The type of time-aligned text. Options include captions, subtitles, chapters, descriptions, or metadata.
• srclang: The language of the track.
• default: Makes this track enabled by default. Multiple track elements can be used simultaneously.

Example of a video with both closed captions and French subtitles:

html

Customizing the Appearance of Subtitles

If the default appearance of your subtitles is unsatisfactory, change their appearance using CSS. Add the <style> tag before the </video> tag in your HTML file to style specific texts.

Example of customizing subtitles using CSS:

html

Testing Browser Compatibility

Ensure subtitles appear correctly on all browsers. Testing on different browsers like Google Chrome, Apple Safari, Mozilla Firefox, Opera, and Microsoft Edge is crucial for consistent subtitle display across platforms.

Building a Caption Menu

Provide users with the option to choose which language they want to see the subtitles in or turn them off entirely by building a caption menu. This menu can be built dynamically, allowing languages to be added or removed later by editing the <track> elements within the video’s markup.

Example of creating a caption menu:

javascript
let subtitlesMenu;

if (video.textTracks) {
const df = document.createDocumentFragment();
const subtitlesMenu = df.appendChild(document.createElement("ul"));
subtitlesMenu.className = "subtitles-menu";

subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off"));

for (let i = 0; i < video.textTracks.length; i++) {
subtitlesMenu.appendChild(
createMenuItem(
subtitles-${video.textTracks[i].language},
video.textTracks[i].language,
video.textTracks[i].label,
),
);
}

videoContainer.appendChild(subtitlesMenu);
}

function createMenuItem(id, language, label) {
const menuItem = document.createElement("li");
const button = document.createElement("button");
button.textContent = label;
button.id = id;
menuItem.appendChild(button);
return menuItem;
}

This code creates a documentFragment to hold an unordered list containing the subtitles menu. First, an option is added to allow the user to switch all subtitles off, then buttons are added for each text track, reading the language and label from each one.

Additional Tips

• Professional Captioning Services: Using professional captioning services can save time and ensure high-quality captions.
• Language Support: Multiple <track> elements support different languages, making content more accessible globally.
• CSS Customization: Customizing the appearance of subtitles using CSS can enhance the overall viewing experience.
• Browser Compatibility Testing: Ensuring subtitles appear correctly on all browsers is crucial for a seamless viewing experience.

By following these tips and guidelines, you can effectively add subtitles to your HTML5 videos, making them more accessible and engaging for all viewers.