HTML | DOM Track label property

Last Updated : 10 Apr, 2019

The DOM track label property is used to set or return the value of the label attribute of the track. It is used to specify the label of the text track.

Syntax:

It is used to return the label property.
```
trackObject.label
```
It is also used to set the label property.
```
trackObject.label = label
```

Value:

label: It is used to specify the title of the text track.

Return Value: It returns the label of the track in the form of string.

Example: To get the value of label attribute.

<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>Track label Property</h2> 
  
    <video width="100"
           height="100"
           controls> 
  
        <track src= 
"https://write.geeksforgeeks.org/wp-content/uploads/11.mp4" 
               id="myTrack1" 
               kind="subtitles" 
               srclang="en" 
               label="English" 
               default> 
  
            <source id="myTrack" 
                    src= 
"https://write.geeksforgeeks.org/wp-content/uploads/11.mp4" 
                    type="video/mp4"> 
  
    </video> 
  
    <p>Click the button to get the 
      label property of the track.</p> 
  
    <button onclick="myFunction()"> 
        Get Label 
    </button> 
  
    <p id="gfg"></p> 
    <!-- Script to get the label value -->
    <script> 
        function myFunction() { 
            var x =  
               document.getElementById("myTrack1"); 
            
            document.getElementById( 
              "gfg").innerHTML = x.label; 
        } 
    </script> 
</body> 
  
</html> 

Output:
Before clicking on the button:

After clicking on the button:

Example-2: To set the value of label attribute.

<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>Track label Property</h2> 
  
    <video width="100" 
           height="100" 
           controls> 
  
        <track src= 
"https://write.geeksforgeeks.org/wp-content/uploads/11.mp4" 
               id="myTrack1" 
               kind="subtitles" 
               srclang="en"
               label="English"> 
  
            <source id="myTrack"
                    src= 
"https://write.geeksforgeeks.org/wp-content/uploads/11.mp4"
                    type="video/mp4"> 
  
    </video> 
  
    <p>Click the button to set the 
      label property of the track.</p> 
  
    <button onclick="myFunction()"> 
        Set Label 
    </button> 
  
    <p id="gfg"></p> 
    <!-- Script to set the label value -->
    <script> 
        function myFunction() { 
            var x =  
                document.getElementById("myTrack1"); 
            
            x.label = "French"; 
            
            document.getElementById("gfg").innerHTML =  
              "The value of label is changed to " + myTrack1.label; 
        } 
    </script> 
</body> 
  
</html> 