DotNetCurry Logo

HTML5 Video with Subtitles

Posted by: Pravinkumar Dabade , on 8/31/2015, in Category HTML5 & JavaScript
Views: 7809
Abstract: Display subtitles using HTML5 video element. We will see WebVTT and TTML file formats to create the subtitles and embed them using a element.

Captions/subtitles allows media contents to reach to different geographical locations. For example, if the media contents are in English, subtitles can be translated into French or German to reach an audience that speaks these languages.

HTML5 video element allows us to create caption enabled video pages. This allows us to provide the subtitles in our HTML5 Video element in the favorite language of the user.

 

To provide subtitles in HTML 5 video element, we will make use of WebVTT and TTML format files. These files are simple text files.

1. WebVTT - Web Video Text Tracks
2. TTML - Timed Text Markup Language

Introduction to WebVTT

WebVTT [Web Video Text Tracks] is a simple text file with the extention .vtt. This file can contain different types of information. For example -

  • Subtitles - The translation of the speech/dialog based on time
  • Captions - It is similar to subtitles but it can include sound effects or other information of the media
  • Chapters - You can create chapters so that users can navigate through the video. For example, creating chapters based on a slide show of Power Point Presentation
  • Metadata - Information about the video which you can access using scripting languages

WebVTT files can also be captured using script languages. These files can be created manually or you can create them using some authoring tools. The format of the file is as shown here:

webvtt-format

The WebVTT file [.vtt], starts with WEBVTT. Then it includes the time which is from and to with the decoration/position of the text which you want to display on your media. The position is shown as A:middle, i.e. the center of the screen.

The next line is the dialog/speech to display on the media. These contents are known as "cues". Each "cue" starts with an ID which is 1, 2 in our case. It must be separated with a blank line. Time specification must be done in HH:MM:SS:MMM format.You can even style the cues using CSS. The above file is used for displaying French subtitles (translated version).

Introduction to TTML

TTML [Timed Text Markup Language] is a specification published by W3C. TTML is XML based language. TTML file includes the XML version and encoding type. The format of the file is shown here:

ttmlformat

The root element in this language starts with <tt> with a namespace. Then you include <body> and <div> tags. In the <div> tag, we are including cues. The timing is specified with the begin and end in the paragraph tag.  Compared to the VTT, the TTML format looks little complex. But when you start using it, you get familiar with it.

Microsoft provides a simple tool called Caption maker. You can download this tool over here http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/

Now let's start creating our demo which will display the video in HTML 5 <Video> element and subtitle the same in English and French.  To start with, add an HTML page to your project. I have named my HTML page as "MathsVideo.html".

Once you add the page, add a folder with the name "Media" under your web application and copy the video which you want to display. For more information about HTML 5 Video element media format support, please visit the following link https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

I am using the MP4 format for this demonstration. Once you add the media file into our Media folder, right click the Media folder and add a text file with the extension .vtt. I have named my file as "MathTrickSubtitle1_EN.vtt" and used the following code:

WEBVTT

1
00:00:01.000 --> 00:00:03.000 A:middle
 Let's say you want to multiply 12 x 13

2
00:00:04.000 --> 00:00:07.000 A:middle
 For this one we will draw one line

3
00:00:08.000 --> 00:00:15.000 A:middle
 For the two we will leave a little bit of space and will draw two lines

4
00:00:16.000 --> 00:00:23.000 A:middle
 For the other numbers we will draw the lines to the other direction

5
00:00:24.000 --> 00:00:29.000 A:middle
 Now we will group together different lines and will count the dots

6
00:00:30.000 --> 00:00:33.000 A:middle
  Here we have six different dots

7
00:00:34.000 --> 00:00:37.000 A:middle
  In the middle, we have 5 different dots

8
00:00:38.000 --> 00:00:41.000 A:middle
  And on the other side we have one dot

9
00:00:42.000 --> 00:00:44.000 A:middle
   And that's the anser - 156

Now let's repeat the above steps to add French subtitles. I have named my file as " MathTrickSubtitle1_EN.vtt ". The code is as shown below -

WEBVTT

1
00:00:01.000 --> 00:00:03.000 A:middle
 Disons que vous voulez multiplier 12 x 13

2
00:00:04.000 --> 00:00:07.000 A:middle
 Pour celui-ci nous allons tirer une ligne

3
00:00:08.000 --> 00:00:15.000 A:middle
 Pour les deux , nous allons laisser un peu d'espace et nous allons tracer deux lignes

4
00:00:16.000 --> 00:00:23.000 A:middle
 Pour les autres chiffres que nous allons tracer les lignes à l'autre direction

5
00:00:24.000 --> 00:00:29.000 A:middle
 Maintenant, nous allons regrouper les différentes lignes et comptera les points

6
00:00:30.000 --> 00:00:33.000 A:middle
  Ici, nous avons six points différents

7
00:00:34.000 --> 00:00:37.000 A:middle
  Au milieu , nous avons cinq points différents

8
00:00:38.000 --> 00:00:41.000 A:middle
  Et de l'autre côté nous avons un point


9
00:00:42.000 --> 00:00:44.000 A:middle
   Et ce est la anser - 156

I have used a translator to convert the English speech to French. That could be the reason, you may not see the correct word as per the speech.

Now open the Web.config file and write the code shown below. This code registers the MIME type for WebVTT and TTML. If you don't include this, you may not see the subtitles in our video.

<system.webServer>
    <staticContent>
      <remove fileExtension=".vtt" />
      <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      <remove fileExtension=".ttml" />
      <mimeMap fileExtension=".ttml" mimeType="application/ttml+xml" />
    </staticContent>
</system.webServer>

Now we will add a <video> element in our HTML page. The code for HTML is shown below -

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video With Subtitles</title>
</head>
<body>
    <video controls="controls" src="../Media/MathTrick1.mp4">
        <track kind='subtitles' srclang='en' label='English' src='../Media/MathTrickSubtitle1_EN.vtt' default>
        <track kind='subtitles' srclang='fr' label='French' src='../Media/MathTrickSubtitle1_FR.vtt'>
    </video>
</body>
</html>

In the above code we are using <video> element and the <track> element inside the video element. The <track> element contains several attributes like - kind - You can set the value of this kind attribute to captions, chapters, descriptions, metadata and subtitles. We are using subtitles in our case. srclang is set to en and fr respectively and the label and the path of the source file is set to English and French subtitles respectively. We are also making English as a default subtitle. User can change the same as per his/her choice.

Now let's run the web page and see how your subtitles look like. The output is shown here:

html5-video-subtitles

Now if you change the language to French using the label shown above, you will see French subtitles. It is shown here:

 

frsubtitles

Now let's test the same using TTML [Timed Text Markup Lanague] file. Let's first add a text file with the extension, .ttml into our Media folder. I have named it as "MathTrickSubtitle2_EN.ttml". Write the code shown below in the file -

<?xml version="1.0" encoding="UTF-8"?>

<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
  <body>
    <div>
      <p begin="00:00:01.000" end="00:00:03.000">Let's say you want to multiply 12 x 13. </p>
      <p begin="00:00:04.000" end="00:00:07.000">For this one we will draw one line. </p>
      <p begin="00:00:08.000" end="00:00:15.000">For the two we will leave a little bit of space and will draw two lines. </p>
      <p begin="00:00:16.000" end="00:00:23.000">For the other numbers we will draw the lines to the other direction. </p>
      <p begin="00:00:24.000" end="00:00:29.000">Now we will group together different lines and will count the dots. </p>
      <p begin="00:00:30.000" end="00:00:33.000">Here we have six different dots. </p>
      <p begin="00:00:34.000" end="00:00:37.000">In the middle, we have 5 different dots. </p>
      <p begin="00:00:38.000" end="00:00:41.000">And on the other side we have one dot. </p>
      <p begin="00:00:42.000" end="00:00:44.000">And that's the anser - 156. </p>
    </div>
  </body>
</tt>

Now let's add another text file with the .ttml extsion into our Media folder. I have named the file as "MathTrickSubtitle2_FR.ttml". Write the following code in this file -

<?xml version="1.0" encoding="UTF-8"?>

<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
  <body>
    <div>
      <p begin="00:00:01.000" end="00:00:03.000">Disons que vous voulez multiplier 12 x 13</p>
      <p begin="00:00:04.000" end="00:00:07.000">Pour celui-ci nous allons tirer une ligne</p>
      <p begin="00:00:08.000" end="00:00:15.000">Pour les deux , nous allons laisser un peu d'espace et nous allons tracer deux lignes</p>
      <p begin="00:00:16.000" end="00:00:23.000">Pour les autres chiffres que nous allons tracer les lignes à l'autre direction</p>
      <p begin="00:00:24.000" end="00:00:29.000">Maintenant, nous allons regrouper les différentes lignes et comptera les points</p>
      <p begin="00:00:30.000" end="00:00:33.000">Ici, nous avons six points différents</p>
      <p begin="00:00:34.000" end="00:00:37.000">Au milieu , nous avons cinq points différents</p>
      <p begin="00:00:38.000" end="00:00:41.000">Et de l'autre côté nous avons un point</p>
      <p begin="00:00:42.000" end="00:00:44.000">Et ce est la anser - 156</p>
    </div>
  </body>
</tt>

Now it's time to change the source of the file in our HTML page. The code for HTML page is as shown below -

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video With Subtitles</title>
</head>
<body>
    <video controls="controls" src="../Media/MathTrick1.mp4" height="400" width="500">
        <track kind='subtitles' srclang='en' label='English' src='../Media/MathTrickSubtitle2_EN.ttml' default>
        <track kind='subtitles' srclang='fr' label='French' src='../Media/MathTrickSubtitle2_FR.ttml'>
    </video>
</body>
</html>

Now run your web page and see the output. It will be the same as shown above. I have done a test of WebVTT which is supported by IE 10, Google Chrome 18, Firefox. TTML is supported by IE 10. But I didn't find the support for the same in Google Chrome and Firefox.

Summary - In this article, we have seen how to display subtitles using HTML5 video element. We have seen WebVTT and TTML file formats to create the subtitles and embed them using a <track> element.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!