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 default Property
The HTML DOM Track default property sets or returns a boolean value that determines whether a text track should be enabled by default when the media element loads, unless the user's preferences override this setting.
Note: Only one track element should have the default attribute set to true per media (audio/video) element to avoid conflicts.
Syntax
Following is the syntax for returning the default property value −
trackObject.default
Following is the syntax for setting the default property −
trackObject.default = booleanValue
Parameters
The booleanValue parameter can have the following values −
| Value | Description |
|---|---|
true |
The track will be enabled by default when the media loads |
false |
The track will not be enabled unless the user specifically selects it |
Return Value
The property returns a Boolean value − true if the track is set as default, false otherwise.
Example − Getting Default Track Status
Following example demonstrates how to check which track is set as default −
<!DOCTYPE html>
<html>
<head>
<title>Track Default Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
video { display: block; margin: 20px 0; }
button { padding: 8px 16px; margin: 5px; border-radius: 5px; }
#result { margin-top: 15px; padding: 10px; background: #f0f0f0; }
</style>
</head>
<body>
<h2>Track Default Property Demo</h2>
<video id="myVideo" width="400" controls>
<source src="sample-video.mp4" type="video/mp4">
<track id="track1" default kind="subtitles" srclang="en" src="english.vtt" label="English">
<track id="track2" kind="subtitles" srclang="es" src="spanish.vtt" label="Spanish">
<track id="track3" kind="subtitles" srclang="fr" src="french.vtt" label="French">
</video>
<button onclick="checkDefaultTrack()">Check Default Track</button>
<button onclick="setSpanishDefault()">Set Spanish as Default</button>
<div id="result"></div>
<script>
function checkDefaultTrack() {
var tracks = document.querySelectorAll('track');
var result = document.getElementById('result');
var defaultTrack = null;
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].default) {
defaultTrack = tracks[i];
break;
}
}
if (defaultTrack) {
result.innerHTML = 'Default track: ' + defaultTrack.label + ' (' + defaultTrack.srclang + ')';
} else {
result.innerHTML = 'No default track found.';
}
}
function setSpanishDefault() {
var tracks = document.querySelectorAll('track');
var result = document.getElementById('result');
// First, set all tracks to non-default
for (var i = 0; i < tracks.length; i++) {
tracks[i].default = false;
}
// Set Spanish track as default
document.getElementById('track2').default = true;
result.innerHTML = 'Spanish track is now set as default.';
}
</script>
</body>
</html>
In this example, the English track is initially set as default. Clicking "Check Default Track" identifies the current default track, and "Set Spanish as Default" changes the default track programmatically.
Example − Managing Multiple Tracks
Following example shows how to manage default tracks when working with multiple subtitle languages −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Track Management</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.track-info { margin: 10px 0; padding: 10px; background: #e9ecef; border-left: 4px solid #007bff; }
.default-track { background: #d1ecf1; border-left-color: #17a2b8; }
button { padding: 6px 12px; margin: 2px; }
</style>
</head>
<body>
<h2>Track Default Property Management</h2>
<video id="videoPlayer" width="400" controls>
<source src="demo-video.mp4" type="video/mp4">
<track id="en-track" kind="subtitles" srclang="en" src="en.vtt" label="English" default>
<track id="es-track" kind="subtitles" srclang="es" src="es.vtt" label="Spanish">
<track id="fr-track" kind="subtitles" srclang="fr" src="fr.vtt" label="French">
</video>
<h3>Available Tracks:</h3>
<div id="tracksList"></div>
<button onclick="refreshTrackInfo()">Refresh Track Info</button>
<script>
function refreshTrackInfo() {
var tracks = document.querySelectorAll('track');
var tracksList = document.getElementById('tracksList');
tracksList.innerHTML = '';
tracks.forEach(function(track, index) {
var trackDiv = document.createElement('div');
trackDiv.className = track.default ? 'track-info default-track' : 'track-info';
trackDiv.innerHTML =
'<strong>' + track.label + '</strong> (' + track.srclang + ')' +
'<br>Default: ' + (track.default ? 'Yes' : 'No') +
'<br><button onclick="setAsDefault('' + track.id + '')">Set as Default</button>';
tracksList.appendChild(trackDiv);
});
}
function setAsDefault(trackId) {
var tracks = document.querySelectorAll('track');
// Remove default from all tracks
tracks.forEach(function(track) {
track.default = false;
});
// Set the selected track as default
document.getElementById(trackId).default = true;
// Refresh the display
refreshTrackInfo();
}
// Initialize on page load
refreshTrackInfo();
</script>
</body>
</html>
This example shows all available tracks with their default status and allows you to change which track is set as default. Only one track can be default at a time.
Key Points
The
defaultproperty corresponds to the HTMLdefaultattribute on track elements.Only one track per media element should have
defaultset totrue.When multiple tracks have
default="true", the browser typically uses the first one encountered.The default track is automatically loaded and displayed when the media starts playing.
Users can still override the default track selection through the browser's media controls.
Browser Compatibility
The Track default property is supported in all modern browsers that support HTML5 video and text tracks, including Chrome, Firefox, Safari, Edge, and Opera.
Conclusion
The HTML DOM Track default property provides programmatic control over which text track should be enabled by default when a media element loads. This property is essential for creating accessible media content with proper subtitle or caption management, ensuring users get the appropriate track selection while maintaining the flexibility to change preferences.
154 Views
