HTML5 Video with Subtitles


HTML5 video element allows us to create caption enabled video pages. Captions/subtitles allows media contents to reach to different geographical locations. For example, if the media contents are in English and need to be translated into French or German to reach an audience that speaks these languages. We can 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 user 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:


















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.

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:



















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 visit the URL to download this tool 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, create a blank ASP.NET Web application and add a HTML page. 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 paste the video which you want to display. For more information about HTML 5 Video element media format support, please visit the link given below -

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 code shown below - 

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 attribute like captions, chapters, descriptions, metadata and subtitles. We are using subtitles. srclang is set to en and fr respectively. The label and the path of the source file. 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:





























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





























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 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">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 into 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 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 39.0 and Firefox 33.

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

No comments:

Post a Comment