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 Video textTracks Property
The HTML DOM Video textTracks property returns a TextTrackList object containing information about all text tracks associated with a video element. Text tracks include subtitles, captions, descriptions, chapters, and metadata that can be displayed alongside video content.
Syntax
Following is the syntax to access the textTracks property −
videoElement.textTracks
Return Value
The property returns a TextTrackList object that contains −
length − The number of text tracks available
Individual tracks − Each track can be accessed by index with properties like
label,language,kind, andmodeMethods −
getTrackById()to find tracks by their ID
Text Track Types
The kind attribute of text tracks can have the following values −
subtitles − Translation of dialogue for viewers who understand the audio but need text
captions − Transcription including sound effects for hearing-impaired viewers
descriptions − Audio descriptions for visually-impaired viewers
chapters − Chapter navigation titles
metadata − Additional information not displayed to users
Example
Following example demonstrates how to access and display text track information −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video textTracks Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Text Tracks</h2>
<video id="videoPlayer" width="400" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
<track default kind="subtitles" srclang="en" src="/html/subtitles-en.vtt" label="English">
<track kind="subtitles" srclang="es" src="/html/subtitles-es.vtt" label="Spanish">
<track kind="captions" srclang="en" src="/html/captions-en.vtt" label="English Captions">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="displayTrackInfo()" style="padding: 10px; border-radius: 5px;">Show Text Track Info</button>
<div id="trackInfo" style="margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 5px;"></div>
<script>
function displayTrackInfo() {
var video = document.getElementById("videoPlayer");
var trackList = video.textTracks;
var info = document.getElementById("trackInfo");
var output = "<h3>Text Track Details:</h3>";
output += "<p><strong>Total tracks: </strong>" + trackList.length + "</p>";
for (var i = 0; i < trackList.length; i++) {
var track = trackList[i];
output += "<div style='margin: 10px 0; padding: 10px; border: 1px solid #ccc;'>";
output += "<strong>Track " + (i + 1) + ":</strong><br>";
output += "Label: " + track.label + "<br>";
output += "Language: " + track.language + "<br>";
output += "Kind: " + track.kind + "<br>";
output += "Mode: " + track.mode;
output += "</div>";
}
info.innerHTML = output;
}
</script>
</body>
</html>
The output displays the video player with text tracks and detailed information when the button is clicked −
Video with Text Tracks [Video Player with Controls] [Show Text Track Info] button After clicking the button: Text Track Details: Total tracks: 3 Track 1: Label: English Language: en Kind: subtitles Mode: showing Track 2: Label: Spanish Language: es Kind: subtitles Mode: disabled Track 3: Label: English Captions Language: en Kind: captions Mode: disabled
Accessing Individual Track Properties
You can access specific properties of each text track −
Example
<!DOCTYPE html>
<html>
<head>
<title>Individual Track Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<video id="myVideo" width="350" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
<track id="englishTrack" kind="subtitles" srclang="en" src="/html/en-subs.vtt" label="English Subtitles">
<track id="frenchTrack" kind="subtitles" srclang="fr" src="/html/fr-subs.vtt" label="French Subtitles">
</video>
<br><br>
<button onclick="checkFirstTrack()" style="padding: 8px;">Check First Track</button>
<p id="result"></p>
<script>
function checkFirstTrack() {
var video = document.getElementById("myVideo");
var firstTrack = video.textTracks[0];
document.getElementById("result").innerHTML =
"First track label: " + firstTrack.label + "<br>" +
"Language: " + firstTrack.language + "<br>" +
"Kind: " + firstTrack.kind + "<br>" +
"Current mode: " + firstTrack.mode;
}
</script>
</body>
</html>
The output shows information about the first text track −
[Video Player] [Check First Track] button After clicking: First track label: English Subtitles Language: en Kind: subtitles Current mode: showing
TextTrack Modes
Each text track has a mode property that controls its visibility −
| Mode | Description |
|---|---|
disabled |
Track is not active and not displayed |
hidden |
Track is active but not displayed (for metadata) |
showing |
Track is active and displayed to the user |
Common Use Cases
The textTracks property is commonly used for −
Language selection − Creating custom subtitle language switchers
Accessibility controls − Toggling captions on/off programmatically
Track validation − Checking if required text tracks are loaded
Custom players − Building custom video player interfaces with track management
Conclusion
The Video textTracks property provides access to all text tracks associated with a video element, returning a TextTrackList object. This property is essential for implementing custom subtitle controls, accessibility features, and managing multiple language tracks in web video applications.
98 Views
