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

<!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 −

HTML DOM Track default Property

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

HTML DOM Track default Property