Open In App

HTML | DOM Video textTracks Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Video textTracks property is used for returning a TextTrackList object. The TextTrackList object is used for representing the available text tracks for a video. Each text track which is available is represented by a separate TextTrack Object. 

Syntax:

videoObject.textTracks

Return Values

  1. TextTrackList Object: It represents the available text tracks for the video.
    • length: It is used to get the number of text tracks available in the video.
    • [index]: It is used to get the TextTrack object by index.
  2. TextTrack Object: It represents a text track.
    • kind: It is used to get the type of the text track.
    • label: It is used to get the label of the text track.
    • language: It is used to get the language of the text track.
    • mode: It is used to get or set if the track is active or not.
    • cues: It is used to get a list of cues as a TextTrackCueList object.
    • activeCues: It is used to get the currently active text track cues as a TextTrackCueList object.
    • addCue(cue): It is used to add a cue to the list of cues.
    • removeCue(cue): It is used to remove a cue from the list of cues.

Below program illustrates the Video textTracks property : 

Example: Getting the number of available text tracks. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Video textTracks Property
    </title>
</head>
 
<body style="text-align: center">
 
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2 style="font-family: Impact">
      Video textTracks Property
  </h2>
    <br>
 
    <video id="Test_Video"
           width="360"
           height="240"
           controls>
       
        <source src="sample2.mp4"
                type="video/mp4">
        <source src="sample2.ogg"
                type="video/ogg">
        <track src="testsub.vtt">
            <track src="testsub2.srt">
    </video>
 
    <p>To get the number of available text tracks of the
      video, double click the "Return Text Tracks" button.
        <br>
 
        <button ondblclick="My_Video()">
          Return Text Tracks
      </button>
 
        <p id="test"></p>
 
        <script>
            function My_Video() {
                var v = document.getElementById(
                  "Test_Video").textTracks.length;
                document.getElementById("test").innerHTML = v;
            }
        </script>
 
</body>
 
</html>


Output:

  • Before clicking the button:
  • After clicking the button:

Supported Browsers: The browser supported by HTML | DOM Video textTracks Property are listed below:

  • Google Chrome 23
  • Edge 12
  • Firefox 31
  • Internet Explorer 10
  • Opera 12.1
  • Apple Safari 6


Last Updated : 12 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads