cuechange | oncuechange event

Occurs when a TextTrackCue in a HTMLTrackElement changes.

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

Syntax

HTML Attribute <element oncuechange = "handler(event)">
Event Property object.oncuechange = handler;
addEventListener Method object.addEventListener("cuechange", handler, useCapture)

Event information

SynchronousNo
BubblesNo
CancelableNo

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

Remarks

In the following example, when an oncuechange event is received on the track element, the activeCue is displayed as an HTML nodes that replace the span element.

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


    <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">
      <span></span>
    </div>


See also

HTMLElement
HTMLTrackElement
TextTrack
Make your videos accessible with Timed Text Tracks

 

 

Show:
© 2014 Microsoft