activeCues property

Returns the TextTrackCues from the currently active TextTrackList as a TextTrackCueList object. Currently active cues are ones that have a startTime before the current playback position (currentTime), and an endTime after it.

This property is read-only.

HTML5 A vocabulary and associated APIs for HTML and XHTML

Syntax

JavaScript
oCueList = object.activeCues

Property values

Type: TextTrackCueList

Returns a TextTrackCueList object that represents the TextTrackList of currently active cues.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML

Remarks

The following example creates an event listener that updates a div element with the current start and end times, and track text.

Note To create timed text files in both Web Video Text Track (WebVTT) and Timed Text Markup Language (TTML) formats, see HTML5 Video Caption Maker on the Windows Internet Explorer test drive site.

Examples

HTML


  <script type="text/javascript">
    // don't add this listener until all DOM content is loaded 
    document.addEventListener("DOMContentLoaded", function () {  
      var track = document.getElementById("track1");
      track.addEventListener("cuechange", function () {
        var myTrack = this.track;             
        var myCues = myTrack.activeCues;      // array of current cues.                                                    
        //  display the start and end time, and cue text
        if (myCues.length > 0) {
          var disp = document.getElementById("display");
          disp.innerHTML = myCues[0].startTime + " --> " + myCues[0].endTime + "  " + myCues[0].getCueAsHTML().textContent;
        }
      }, false);
    }, false);
  </script>
  </head>
<body>
  <video id="video1" controls>
    <source src="video.mp4"  > 
    <track id="track1" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>
  HTML5 video is not supported
  </video>
  <div id="display"></div>