HTML | DOM Track Object

The Track object in HTML represents an HTMLelement.

Accessing a Track Object:
A Track Object can be accessed by using getElementById() method.
This method is used to returns the element that has the ID attribute.

var x = document.getElementById("Track");

Creating a Track Object:
A Track Object can be created by using the document.createElement() method.
This method used to creates an Element Node with the specified name.

var x = document.createElement("Track");

Properties of Track Object

  1. default: It returns the default state of the track.
    Syntax:

    var x = document.getElementById("myTrack").Default;
  2. kind: It returns the value of the kind attribute of the track.
    Syntax:

    var x = document.getElementById("myTrack").kind;
  3. label: It returns the value of the label attribute of the track.
    Syntax:

    var x = document.getElementById("myTrack").label;
  4. readyState: It returns the current state of the track resource.
    Syntax:

    var x = document.getElementById("myTrack").readyState;
  5. src: It returns the value of the src attribute of the track.
    Syntax:

    var x = document.getElementById("myTrack").src;
  6. srclang: It returns the value of the srclang attribute of the track.
    Syntax:

    var x = document.getElementById("myTrack").srclang;
  7. track: It returns a TextTrack object representing the track element’s text track data.
    Syntax:

    var x = document.getElementById("myTrack").track;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Track Object</h2>
  
    <video width="300"
           height="300"
           controls>
        
        <track src=
               kind="subtitles" 
               srclang="en" 
               label="English">
        
            <source id="myTrack" 
                    src=
                    type="video/mp4">
        
            <source src=
                    type="video/ogg"
      Your browser does not support the video element.
    </video>
  
    <p>Click the button to get 
      the source of the video file.</p>
  
    <button onclick="myFunction()">
      Get Source
  </button>
  
    <p id="demo"></p>
  
    <script>
        function myFunction() {
            var x = document.getElementById(
              "myTrack").src;
            document.getElementById(
              "demo").innerHTML = x;
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before:

After:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.