getCueAsHTML method

Returns the TextTrackCue text (caption) as a document fragment consisting of HTML elements and other Document Object Model (DOM) nodes .

HTML5 A vocabulary and associated APIs for HTML and XHTMLInternet Explorer 10



var oTextAsHTML = TextTrackCue.getCueAsHTML();


This method has no parameters.

Return value

Type: DocumentFragment

A document fragment that represents the TextTrackCue text.

Standards information


The following example gets the list of cues from a track element, and uses the activeCues property to get the current cue. The getCueAsHTML method is used to display the caption in a div element below the video.

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.


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

    <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);      
    <video id="video1" controls>
      <source src="video.mp4"  >
      <track id='track1' label='English captions' src="entrack.vtt" kind='subtitles' srclang='en' default >    
    <div id="display">

See also

Make your videos accessible with Timed Text Tracks



© 2015 Microsoft