HTML - <track> tag

The HTML <track> tag is used to define the time-based text tracks for a media file. The <audio> and <video> elements must employ the <track> tag as a child element. Adding Subtitles, captions, and other types of text can be added using the <track> tag and will be displayed when a media file is playing.

The HTML5 <track> tag is a new addition. The format for tracks is WebVTT (.vtt files).More than one track with the same label, srclang, and kind cannot be included in a media element.

Syntax

Following is the syntax for HTML <track> tag −

<track src=" " kind=" " srclang=" " label=" ">

Specific Attributes

The HTML <track> tag also supports the following additional attributes −

S.No. Attribute & Description
1

default

uses the default track
2

kind

kind of track to be used
3

label

displays title of text track
4

src

URL of track file
5

srclang class = "inline"

specifies language of the text

Example

Let’s look at the following example, where we are going to use the <track> and get the subtitles in English.

HTML

Save the following HTML document with name "index1.html" −

<!DOCTYPE html>
<html>
<head>
   <title>Video Player</title>
   <style>
      video {
         width: 30%;
         height: 40%;
      }
   </style>
</head>
<body>
   <video controls>
      <source src="https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?width=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" type="video/mp4">
      <track src="ex1.vtt" kind="captions" label="English" srclang="en">
   </video>
</body>
</html>

Captions file

Save the following captions file with name "ex1.vtt" 

WEBVTT

00:00:00.000 --> 00:00:10.000
Tuotorialspoint

00:00:10.000 --> 00:00:20.000
Simply Easy Learning

00:00:20.000 --> 00:00:30.000
Tutorialspoint.com is a dedicated website to provide quality online education

00:00:30.000 --> 00:00:35.000
Global headquarters for Tutorials Point is located in Hyderabad,Telangana,India.

00:00:35.000 --> 00:00:41.000
Mohtashim M. is the Founder & Managing Director at Tutorials Point .

To execute the above program, place the "ex1.vtt" (captions) and the "index1.html" (HTML document) in a single folder to see the expected output. And to see the output the user need to on the captions in the player.

Example

Consider another scenario where we are going to add the subtitles in the Korean language.

HTML

Save the following HTML document with name "index2.html" −

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3 ">
   <video width="300" height="150" controls autoplay>
      <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
      <track src="ex2.vtt" kind="captions" label="Korean" srclang="ko">
   </video>
</body>
</html>

Captions file

Save the following captions file with name "ex2.vtt" −

WEBVTT

00:00:00.000 --> 00:00:02.000
환영

00:00:02.000 --> 00:00:05.000
아름다운 세상으로.!

00:00:05.000 --> 00:00:07.000
많은 생물을 찾을 수 있는 곳

00:00:07.000 --> 00:00:10.000
많은 전통과 많은 종교s

To execute the above program, place the "ex2.vtt" (captions) and the "index2.html" (HTML document) in a single folder to see the expected output. And to see the output the user need to on the captions in the player.

html_tags_reference.htm
Advertisements