Skip to content
Related Articles

Related Articles

Improve Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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=
               id="myTrack1" 
               kind="subtitles" 
               srclang="en" 
               label="English" 
               default>
  
            <source id="myTrack" 
                    src=
                    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=
               id="myTrack1" 
               kind="subtitles" 
               srclang="en"
               label="English">
  
            <source id="myTrack"
                    src=
                    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>

Output:
Before clicking on the button:

After clicking on the button:

Supported Browsers:

  • Google Chrome
  • Internet Explorer 10.0+
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :