Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Track Object

  • Last Updated : 30 Jun, 2021

The Track object in HTML represents an HTML element.
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. 
 

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

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;
  1. kind: It returns the value of the kind attribute of the track. 
    Syntax: 
var x = document.getElementById("myTrack").kind;
  1. label: It returns the value of the label attribute of the track. 
    Syntax: 
var x = document.getElementById("myTrack").label;
  1. readyState: It returns the current state of the track resource. 
    Syntax: 
var x = document.getElementById("myTrack").readyState;
  1. src: It returns the value of the src attribute of the track. 
    Syntax: 
var x = document.getElementById("myTrack").src;
  1. srclang: It returns the value of the srclang attribute of the track. 
    Syntax: 
var x = document.getElementById("myTrack").srclang;
  1. track: It returns a TextTrack object representing the track element’s text track data. 
    Syntax: 
var x = document.getElementById("myTrack").track;

Example: 



html




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

Output: 
Before: 
 

After: 
 

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!