The default attribute in HTML is used to specify that a text track should be enabled by default in the <track> element.
Definition and Usage
➔ <track default> or <track default="default"> both mean the same thing.
➔ For the <track> element, these are the required attributes:
- src: The URL of the track file.
- type: Track type (e.g., captions, subtitles, descriptions, chapters, metadata).
- srclang: The language of the track.
- label: A title for the track.
Syntax
//In HTML
<video controls width="600" id="sample">
<source src="myvideo.mp4" type="video/mp4">
<track default src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" />
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles" />
</video>
//In Javascript
<script>
// This anonymous function runs as soon as it's encountered.
(() => {
let element = document.querySelector("#sample");
element.default = true;
element.setAttribute("default", "");
element.setAttribute("default", "default");
})();
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML default attribute example</title>
</head>
<body>
<h3>HTML default attribute example</h3>
<p>The default attribute specifies that a text track should be enabled by default.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video controls width="600" id="sample">
<source src="myvideo.mp4" type="video/mp4">
<track default src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" />
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles" />
</video>
<script>
// This anonymous function runs as soon as it's encountered.
/* (() => {
let element = document.querySelector("#sample");
element.default = true;
element.setAttribute("default", "");
element.setAttribute("default", "default");
})(); */
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.