Adding subtitles to a video tag

Adding subtitles to a video clip is certainly not a new thing. Hard and Soft Sub are two techniques for adding subtitles. With the Hard-Sub technique you can embed the subtitles into the movie, and with Soft-Sub you can display the subtitles using flash technology. Today I will teach you a Soft-Sub technique to add subtitles to your video.

In this guide we will use .OGG or .OGV format (.OGV format is actually an instance of .OGG, only .OGG can also be used for sound) and .SRT subtitles.

The adventeges of the technique I’m about to show you are that it uses open formats (OGG and SRT), its implement is very easy and dinamyc and in the subtitles file we can add HTML tags that will show later as part of the subtitles.

The HTML Code

Lets have a look at the HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript" src="video_subtitles.js"></script>

<style type="text/css">
#subtitle {
background-color: rgba(255, 255, 255, 0.7);
padding:10px 0;
position: absolute;
bottom: 0;
width: 100%;
color: black;
visibility: hidden;
font-size: 1em;
text-align:center;
direction:rtl;
}

#video {
width:432px;
height:240px;
direction:ltr;
}
</style>

</head>

<body>

<video id="video" src="video5.ogv" controls="" subtitles="en.srt"></video>
<div id="subtitle" style="visibility: hidden;"></div>

</body>
</html>

I will explain:

In the 4th line we are actually including the jQuery library from Google.
In the next line we add the script that will make all the subtitles appear (the script source is from the MOZBOX blog).

Later in lines 7-26 we define CSS styling for the video and the subtitle line – I will note elaborate on that.

Now we have reached the main part, lines 32-33. Let’s look at them again:

1 2	<video id="video" src="video5.ogv" controls="" subtitles="en.srt"></video> <div id="subtitle" style="visibility: hidden;"></div>

We actually added two thing:
A Video tag – the tag has an id of ‘video’, a link to the video file, controllers (the ‘controls’ attribute doesn’t take any value) and a link to our subtitles file (.SRT).
An empty element – The element has the id of ’subtitles’ and is hidden.

If you have followed the instructions correctly you now should have the video with subtitles. You are welcome to download the source files and look at the JS code that controls the subtitles.

Be aware!

Be aware! The video is only supported in modern browsers that support the Video tag (HTML 5). This means Firefox 3.1/3.5 or chorme.