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 src Property
The HTML DOM Track src property sets or returns the value of the src attribute of a <track> element. This property specifies the URL of the track file that contains subtitles, captions, descriptions, chapters, or metadata for a video or audio element.
Syntax
Following is the syntax for getting the src property −
trackObject.src
Following is the syntax for setting the src property −
trackObject.src = "URL"
Parameters
The src property accepts a string value representing the URL or path to the track file. Common track file formats include:
WebVTT (.vtt) − Web Video Text Tracks format
SRT (.srt) − SubRip Text format
TTML (.ttml) − Timed Text Markup Language
Return Value
The property returns a string containing the URL of the track file, or an empty string if no src attribute is set.
Example − Getting Track src Property
Following example demonstrates how to retrieve the src property of track elements −
<!DOCTYPE html>
<html>
<head>
<title>Track src Property - Get</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video with Track Elements</h2>
<video id="videoPlayer" controls width="400">
<source src="sample.mp4" type="video/mp4">
<track default kind="subtitles" srclang="en" src="subtitles-en.vtt" label="English">
<track kind="subtitles" srclang="es" src="subtitles-es.vtt" label="Spanish">
<track kind="descriptions" srclang="en" src="descriptions-en.vtt" label="Audio Description">
</video>
<br><br>
<button onclick="showTrackSources()" style="padding: 10px; border-radius: 5px;">Show Track Sources</button>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f0f0f0;"></div>
<script>
function showTrackSources() {
var tracks = document.getElementsByTagName("track");
var output = document.getElementById("output");
var result = "<h3>Track Sources:</h3>";
for(var i = 0; i < tracks.length; i++) {
result += "<p><strong>" + tracks[i].label + ":</strong> " + tracks[i].src + "</p>";
}
output.innerHTML = result;
}
</script>
</body>
</html>
The output displays all track sources when the button is clicked −
Track Sources: English: subtitles-en.vtt Spanish: subtitles-es.vtt Audio Description: descriptions-en.vtt
Example − Setting Track src Property
Following example shows how to dynamically change the src property of a track element −
<!DOCTYPE html>
<html>
<head>
<title>Track src Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Dynamic Track Source Change</h2>
<video id="myVideo" controls width="400">
<source src="sample.mp4" type="video/mp4">
<track id="mainTrack" default kind="subtitles" srclang="en" src="default-subtitles.vtt" label="Default">
</video>
<br><br>
<button onclick="changeToEnglish()" style="margin: 5px; padding: 8px;">English Subtitles</button>
<button onclick="changeToSpanish()" style="margin: 5px; padding: 8px;">Spanish Subtitles</button>
<button onclick="showCurrentSrc()" style="margin: 5px; padding: 8px;">Show Current Source</button>
<div id="display" style="margin-top: 15px; padding: 10px; background: #e9ecef;"></div>
<script>
var track = document.getElementById("mainTrack");
var display = document.getElementById("display");
function changeToEnglish() {
track.src = "english-subtitles.vtt";
track.label = "English";
display.innerHTML = "<p>Changed to English subtitles</p>";
}
function changeToSpanish() {
track.src = "spanish-subtitles.vtt";
track.label = "Spanish";
display.innerHTML = "<p>Changed to Spanish subtitles</p>";
}
function showCurrentSrc() {
display.innerHTML = "<p><strong>Current src:</strong> " + track.src + "</p>";
}
</script>
</body>
</html>
The buttons allow switching between different subtitle files and displaying the current source.
Example − Checking Track Availability
Following example demonstrates how to check if a track source is available and handle missing files −
<!DOCTYPE html>
<html>
<head>
<title>Track src Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Track Source Validation</h2>
<video controls width="400">
<source src="sample.mp4" type="video/mp4">
<track id="testTrack" default kind="subtitles" srclang="en" src="subtitles.vtt" label="English">
</video>
<br><br>
<button onclick="validateTrackSrc()" style="padding: 10px; border-radius: 5px;">Validate Track Source</button>
<div id="result" style="margin-top: 20px; padding: 15px; border-radius: 5px;"></div>
<script>
function validateTrackSrc() {
var track = document.getElementById("testTrack");
var result = document.getElementById("result");
var srcUrl = track.src;
if(srcUrl) {
// Extract filename from URL
var filename = srcUrl.substring(srcUrl.lastIndexOf('/') + 1);
result.innerHTML = "<p style='color: green;'><strong>Track source found:</strong> " + filename + "</p><p>Full URL: " + srcUrl + "</p>";
result.style.background = "#d4edda";
} else {
result.innerHTML = "<p style='color: red;'><strong>No track source specified</strong></p>";
result.style.background = "#f8d7da";
}
}
</script>
</body>
</html>
This example checks if a track source is properly configured and displays the validation result.
Browser Compatibility
The Track src property is supported in all modern browsers that support HTML5 video and the <track> element:
| Browser | Version |
|---|---|
| Chrome | 23+ |
| Firefox | 31+ |
| Safari | 6+ |
| Edge | 12+ |
| Opera | 12.1+ |
Conclusion
The Track src property provides a way to dynamically access and modify the source URL of track elements in HTML5 videos. This is useful for implementing dynamic subtitle switching, track validation, and multilingual video content management. Always ensure track files are properly formatted and accessible to avoid playback issues.
174 Views
