Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we create the title of the text track in HTML?
The label attribute in HTML is used to create the title of text tracks in the <track> element. This attribute provides a user-readable title for the track that appears in the browser's media controls, helping users identify and select different subtitle, caption, or description tracks.
Syntax
Following is the syntax for using the label attribute in the <track> element −
<track src="trackfile.vtt" kind="subtitles" srclang="en" label="Track Title">
Where label specifies a user-readable title for the text track. This title is displayed in the browser's track selection menu.
Track Element Attributes
The <track> element supports several important attributes for defining text tracks −
src − Specifies the URL of the track file (usually a .vtt file)
kind − Defines the type of track: subtitles, captions, descriptions, chapters, or metadata
srclang − Specifies the language of the track text
label − Provides the user-visible title for the track
default − Indicates which track should be enabled by default
Example − Multiple Subtitle Tracks
Following example demonstrates how to use the label attribute to create titles for multiple subtitle tracks −
<!DOCTYPE html>
<html>
<head>
<title>Video with Multiple Subtitle Tracks</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Subtitle Options</h2>
<video width="450" height="300" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles">
<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French Subtitles" default>
Your browser does not support the video element.
</video>
<p>Use the CC (closed captions) button in the video controls to select subtitle tracks.</p>
</body>
</html>
In this example, users can select from "English Subtitles", "Spanish Subtitles", or "French Subtitles" from the browser's track selection menu. The French track is set as default.
Example − Different Track Types
Following example shows how to use the label attribute for different types of tracks −
<!DOCTYPE html>
<html>
<head>
<title>Video with Various Track Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Educational Video with Multiple Track Options</h2>
<video width="500" height="350" controls>
<source src="/html5/educational-video.mp4" type="video/mp4">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default>
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
<track src="chapters_en.vtt" kind="chapters" srclang="en" label="Video Chapters">
Your browser does not support the video element.
</video>
<p>This video includes captions, audio descriptions, and chapter navigation.</p>
</body>
</html>
This example shows three different track types, each with descriptive labels that help users understand what each track provides.
Track Kind Values and Label Examples
Following table shows common track kinds and appropriate label examples −
| Track Kind | Purpose | Label Example |
|---|---|---|
| subtitles | Translation of spoken content | "Spanish Subtitles", "French Subtitles" |
| captions | Transcription with sound effects | "English Captions", "Closed Captions" |
| descriptions | Audio description for visually impaired | "Audio Descriptions", "Visual Descriptions" |
| chapters | Chapter navigation | "Chapter Markers", "Video Chapters" |
| metadata | Metadata for scripts | "Metadata Track", "Script Data" |
Example − Accessing Track Labels with JavaScript
Following example demonstrates how to access and display track labels using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Track Labels</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Track Information</h2>
<video id="myVideo" width="400" height="250" controls>
<source src="/html5/sample.mp4" type="video/mp4">
<track src="sub_en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
<track src="sub_de.vtt" kind="subtitles" srclang="de" label="German Subtitles">
<track src="captions.vtt" kind="captions" srclang="en" label="English Captions">
</video>
<button onclick="showTrackLabels()">Show Track Labels</button>
<div id="trackInfo"></div>
<script>
function showTrackLabels() {
const video = document.getElementById('myVideo');
const tracks = video.textTracks;
let info = '<h3>Available Tracks:</h3><ul>';
for (let i = 0; i < tracks.length; i++) {
info += `<li><strong>${tracks[i].label}</strong> (${tracks[i].kind}, ${tracks[i].language})</li>`;
}
info += '</ul>';
document.getElementById('trackInfo').innerHTML = info;
}
</script>
</body>
</html>
Clicking the button displays all track labels along with their kind and language information.
Available Tracks: ? English Subtitles (subtitles, en) ? German Subtitles (subtitles, de) ? English Captions (captions, en)
Conclusion
The label attribute in the <track> element creates user-friendly titles for text tracks in HTML video and audio elements. It helps users identify and select appropriate subtitle, caption, or description tracks from the browser's media controls. Always provide descriptive labels that clearly indicate the track's language and purpose.
192 Views
