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
HTML DOM Track label Property
The HTML DOM Track label property sets or returns the value of the label attribute of a <track> element. This property specifies the visible text that describes the track content, such as "English Subtitles" or "Audio Description".
Syntax
Following is the syntax for returning the label value −
trackObject.label
Following is the syntax for setting the label value −
trackObject.label = labelValue
Parameters
labelValue − A string that specifies the user-readable title for the track. This value appears in the browser's track selection menu.
Return Value
Returns a string representing the label text of the track element. If no label is specified, it returns an empty string.
Example − Getting Track Labels
Following example demonstrates how to retrieve the label of the default track −
<!DOCTYPE html>
<html>
<head>
<title>Track Label Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
video { display: block; margin: 10px 0; }
button { padding: 8px 15px; margin: 5px; }
#result { margin-top: 15px; padding: 10px; background-color: #f0f0f0; }
</style>
</head>
<body>
<h2>Track Label Example</h2>
<video id="videoPlayer" controls width="400">
<source src="sample.mp4" type="video/mp4">
<track default kind="subtitles" srclang="en" src="english.vtt" label="English Subtitles">
<track kind="subtitles" srclang="es" src="spanish.vtt" label="Spanish Subtitles">
<track kind="captions" srclang="en" src="captions.vtt" label="English Captions">
</video>
<button onclick="getDefaultTrackLabel()">Get Default Track Label</button>
<button onclick="getAllTrackLabels()">Get All Track Labels</button>
<div id="result"></div>
<script>
function getDefaultTrackLabel() {
var tracks = document.getElementsByTagName("track");
var result = document.getElementById("result");
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].default) {
result.innerHTML = "Default track label: " + tracks[i].label;
return;
}
}
result.innerHTML = "No default track found";
}
function getAllTrackLabels() {
var tracks = document.getElementsByTagName("track");
var result = document.getElementById("result");
var labels = [];
for (var i = 0; i < tracks.length; i++) {
labels.push((i + 1) + ". " + tracks[i].label);
}
result.innerHTML = "All track labels:<br>" + labels.join("<br>");
}
</script>
</body>
</html>
The output displays the default track label or all available track labels when the respective buttons are clicked −
Default track label: English Subtitles All track labels: 1. English Subtitles 2. Spanish Subtitles 3. English Captions
Example − Setting Track Labels Dynamically
Following example shows how to modify track labels using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Track Labels</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
video { display: block; margin: 10px 0; }
button { padding: 8px 15px; margin: 5px; }
input { padding: 5px; margin: 5px; }
#status { margin-top: 15px; color: green; }
</style>
</head>
<body>
<h2>Dynamic Track Label Modification</h2>
<video id="myVideo" controls width="400">
<source src="sample.mp4" type="video/mp4">
<track id="track1" kind="subtitles" srclang="en" src="english.vtt" label="Original English">
<track id="track2" kind="subtitles" srclang="fr" src="french.vtt" label="Original French">
</video>
<p>Change Track 1 Label: <input type="text" id="newLabel" placeholder="Enter new label"></p>
<button onclick="changeTrackLabel()">Update Label</button>
<button onclick="showCurrentLabels()">Show Current Labels</button>
<div id="status"></div>
<script>
function changeTrackLabel() {
var track = document.getElementById("track1");
var newLabel = document.getElementById("newLabel").value;
var status = document.getElementById("status");
if (newLabel.trim() !== "") {
track.label = newLabel;
status.innerHTML = "Track label updated to: " + track.label;
} else {
status.innerHTML = "Please enter a valid label";
}
}
function showCurrentLabels() {
var track1 = document.getElementById("track1");
var track2 = document.getElementById("track2");
var status = document.getElementById("status");
status.innerHTML = "Current labels:<br>" +
"Track 1: " + track1.label + "<br>" +
"Track 2: " + track2.label;
}
</script>
</body>
</html>
This example allows users to dynamically change track labels and view the current label values −
Track label updated to: Updated English Subtitles Current labels: Track 1: Updated English Subtitles Track 2: Original French
Common Use Cases
The Track label property is commonly used for −
Subtitle Management − Providing user-friendly names for different language tracks
Caption Selection − Allowing users to choose between different caption types
Audio Description − Labeling tracks that provide audio descriptions for accessibility
Dynamic Content − Updating track labels based on user preferences or content changes
Browser Compatibility
The Track label property is supported in all modern browsers that support HTML5 video and the <track> element, including Chrome, Firefox, Safari, Edge, and Opera.
Conclusion
The HTML DOM Track label property provides a simple way to get and set user-readable descriptions for video tracks. It enables dynamic track management and improves user experience by providing clear, descriptive labels for different track options in media players.
150 Views
