HTML - <track> Tag

Quiz

Introduction to <track> Tag

The HTML <track> tag is used to specify the text tracks for media elements such as <video> and <audio>. It allows to provide the subtitles, captions, descriptions or metadata for media content.

The <track> tag is a self-closing and requires the src attribute (pointing to the track file) and the srclang attribute (indicating the language). It supports the default attribute to specify the default track to be displayed.

Syntax

Following is the syntax of HTML <track> tag −

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

Attributes

HTML track tag supports Global and Event attributes of HTML. It also accepts some specific attributes as well which are listed bellow.

Attribute	Value	Description
default	default	Specifies that, the track to enabled if the user wants to change the track.
kind	captions chapters descriptions metadata subtitles	Specify the kind of track to be used.
label	text	Displays title of text track.
src	URL	Specify the track URL.
srclang	language_code	Specify language of the track text data (required if kind="subtitles").

Example : Creating English Video Track

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

<!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 : Creating Korean Video Track

Consider the following example, where we are going to use the <track> tag to add the subtitles in the Korean language.

<!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.

Supported Browsers

Tag
track	Yes 23.0	Yes 10.0	Yes 31.0	Yes 6.0	Yes 12.1

html_tags_reference.htm

Print Page