HTML | DOM Track Object
The Track object in HTML represents an HTML <track> 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.
var x = document.createElement("Track");Properties of Track Object
- default: It returns the default state of the track.
Syntax:
var x = document.getElementById("myTrack").Default;- kind: It returns the value of the kind attribute of the track.
Syntax:
var x = document.getElementById("myTrack").kind;- label: It returns the value of the label attribute of the track.
Syntax:
var x = document.getElementById("myTrack").label;- readyState: It returns the current state of the track resource.
Syntax:
var x = document.getElementById("myTrack").readyState;- src: It returns the value of the src attribute of the track.
Syntax:
var x = document.getElementById("myTrack").src;- srclang: It returns the value of the srclang attribute of the track.
Syntax:
var x = document.getElementById("myTrack").srclang;- 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
Please Login to comment...