HTML DOM Track default Property


The HTML DOM Track default property sets/returns a boolean value corresponding to whether the track is to enabled until the user’s preference contradicts it.

NOTE: Only one track should be default per media (audio/video) element.

Following is the syntax −

Returning boolean value - true/false

trackObject.default

Setting default to booleanValue

trackObject.default = booleanValue

Here, “booleanValue” can be the following −

booleanValue
Details
true
It defines that track willbe default enabled
false
It defines that track willnot be enabled unless user prefers to

Let us see an example of Track default property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Track default</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>Track-default</legend>
         <video id="videoSelect" controls width="250" src="sample.mp4">
            <track default kind="subtitles" srclang="es" src="sample-es.srt"/>
            <track kind="subtitles" srclang="en" src="sample-en.srt"/>
         </video><br>
         <input type="button" onclick="getTrackDetails()" value="What is the default track?">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var trackSelect = document.getElementsByTagName("track");
   function getTrackDetails() {
      for(var i=0; i<trackSelect.length; i++)
         if(trackSelect[i].default)
            divDisplay.textContent = 'Default track for video: '+trackSelect[i].srclang;
   }
</script>
</body>
</html>

Output

Before clicking ‘What is the default track?’ button −

After clicking ‘What is the default track?’ button −

Updated on: 29-Oct-2019

59 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements