ABC of CS
Step-by-Step Guide to Adding Subtitles to Videos in HTML

Photo by János Venczák on Unsplash

Step-by-Step Guide to Adding Subtitles to Videos in HTML

Rakesh Sadhukhan's photo
Rakesh Sadhukhan
·

2 min read

First, we need to understand what a subtitle is. Subtitles are text displayed on a video screen to help viewers understand the content when they cannot follow the language or accent of the video. They appear on the screen according to specific timestamps, synchronized with the video.

Now.. how can we write Subtitles?

Have you heard WebVTT?

WebVTT ( Web Video Text Tracks ) are text tracks providing text cues that are time aligned with other media, such as video or audio tracks.

firstly you have to create a .vtt file for creating subtitles.

Example: Create <filename>.vtt file named subtitle.vtt

WEBVTT

00:00.000 --> 00:03.000
Hello!

00:03.000 --> 00:04.900
Where are you going?

00:05.000 --> 00:06.900
You are very beautiful.

00:07.900 --> 00:09.100
Oops!!

First write “WEBVTT” at the top of the file then write timestamp and in next line the text which is subtitle.

minute:second.milisecond --> minute:second.milisecond

<your own text for subtitle>

Now.. Add .vtt file with HTML

<video controls width="600">
        <source src="../media/video.mp4" type="video/mp4">
        <track default kind="subtitles" srclang="en" src="../media/subtitle.vtt" />
</video>

Using <video> tag we can add video on the Web Pages, where controls attributes controls the video playback.

Using <source> we can add video file ( src=”path of the video” ) and type of the media ( type = “video/mp4” )

Now for add subtitle use <track> where,

default : Enable the subtitle by default if you use in <track>.

kind: How text track is meant to be used like “subtitles”, “captions” , “chapters”, “metadata”. In the example we use subtitles.

srclang: language of the track text data.

src: Address of the track ( .vtt file )

Full HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video controls width="600">
        <source src="../media/video.mp4" type="video/mp4">
        <track default kind="subtitles" srclang="en" src="../media/subtitle.vtt" />
    </video>
</body>
</html>

Thank you, Hitesh Choudhary sir & Piyush Garg sir for your invaluable guidance and inspiration. Your mentorship has been truly transformative, and I am deeply grateful for all the knowledge and support you’ve shared. 🙏

WebVTTChaiCodeSubtitlesHTML5