This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

getCueAsHTML

Summary

Returns the text track cue text as a DocumentFragment of HTML elements and other DOM nodes.

Method of apis/audio-video/TextTrackCueapis/audio-video/TextTrackCue

Syntax

var object = TextTrackCue.getCueAsHTML();

Return Value

Returns an object of type DOM NodeDOM Node

DocumentFragment: A document fragment that represents the TextTrackCue text.

Examples

The HTML nodes replace the span element that is the first child of the div.

<head>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
      var track = document.getElementById("track1");
      track.addEventListener("cuechange", function () {
        var myTrack = this.track;             // track element is "this"
        var myCues = myTrack.activeCues;      // activeCues is an array of current cues.
        if (myCues.length > 0) {
          var disp = document.getElementById("display");
          disp.replaceChild((myCues[0].getCueAsHTML()), disp.firstChild);
        }
      }, false);
    }, false);
    </script>
  </head>
  <body>
    <video id="video1" controls>
      <source src="video.mp4"  >
      <track id='track1' label='English captions' src="entrack.vtt" kind='subtitles' srclang='en' default >
    </video>
    <div id="display">
      
    </div>

Related specifications

W3C HTML5 Specification
W3C Editor’s Draft

Attributions