 |
| USE OF HTML5-TRACK-TAG |
Introduction of HTML5 <track> Tag
The <track> tag specifies text tracks for audio and video elements. Text track contains the text that you want to show when playing audio or video. Text can have subtitles, caption, description, and metadata.
With the help of subtitles and caption, the user understands your content even better so that the user experience is improved.
In the world of the Internet, nowadays the trend of multimedia (audio/video) is very high. These days, almost fifty percent (50%) people search for video while searching any content. The main reason for this is that the multimedia user enhances the experience.
As you know that HTML5 also provides full support for multimedia . Important tags like <audio>, <video> and <source> are available for multimedia support in HTML5. In the same context, the HTML5 provides <track> tag to improve the user experience.
Syntax of HTML5 <track> Tag
The general syntax of the <track> tag is given below.
<track src = "URL-of-track-file">
As you can see in the above syntax, this is an empty tag because there is no closing tag of <track> tag. This should always be defined within the video or audio tag. Also, if you are using <source> tags inside <audio> tag and <video> tags, then the <track> tag should be define after the <source> tags.
Attributes of HTML5 <track> Tag
You can see the attributes of <track> tag as below.
default
- This is a boolean attribute. This attribute shows that the track is a default track. If the user does not select any other track, then this track is enabled by default.
kind
- This attribute uses to define the type of track. This attribute can have five possible values.
1. Subtitles
2. Captions
3. Metadata
4. Chapters
5. Descriptions
label
- The title of the track is defined by this attribute.
src
- The URL of the track file is defined by this attribute.
srclang
- This attribute is used to define the language of the track. For example, en for English track and es for Spanish track.
The track tag also supports all global and event attributes of HTML.
How to use track tag in html5?
Example of HTML5 <track> tag.
Example of HTML5 <track> tag.
<!DOCTYPE html>
<html>
<head>
<title> Example of HTML5 track tag </title>
</head>
<body>
<h1>My Favorite Video Song </h1>
<video controls>
<source src= "videos/playlist/favourite.mp4" type ="video/mp4">
<track src="videos/subtitles/sub_english.vtt" kind="subtitles" srclang="en" label="English">
</video>
</body>
</html>
<html>
<head>
<title> Example of HTML5 track tag </title>
</head>
<body>
<h1>My Favorite Video Song </h1>
<video controls>
<source src= "videos/playlist/favourite.mp4" type ="video/mp4">
<track src="videos/subtitles/sub_english.vtt" kind="subtitles" srclang="en" label="English">
</video>
</body>
</html>
The output of the above script is given below.
 |
| HTML5 TRACK TAG EXAMPLE |
Browser Compatibility
All popular browser compatible with the <track> tags in HTML5. There are below list of the first version of browsers those support this tag.1. Google Chrome 18.0
2. Firefox 31.0
3. Internet Explorer 10.0
4. Safari 6.0
5. Opera 15.0
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.