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. This tag is new introduced in HTML5. 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

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

Attribute

HTML track tag supports Global and Event attributes of HTML. And 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").

Examples of HTML track Tag

Bellow examples will illustrate the usage of track tag. Where, when and how to use track tag.

Creating English Video Track

Let’s 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.

Creating Korean Video Track

Consider another scenario where we are going 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