Skip to content
Related Articles

Related Articles

HTML | DOM Track label property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Apr, 2019
View Discussion
Improve Article
Save Article

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=
               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 :

Start Your Coding Journey Now!