HTML | DOM Video textTracks Property

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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
  • Internet Explorer
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

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.