Listening for events

cuechange TextTrack events,  enter and exit cue events

Instead of reading the whole content of a track at once, like in the previous example, it might be interesting to process the track content cue by cue, while the video is being played. For example, you choose which track you want – say, German subtitles – and you want to display the subtitles in sync with the video, below the video, with your own style and animations… Or you display the entire set of subtitles to the side of the video and you want to highlight the current one… For this, you can listen for different sorts of events.

The two types of cue event are:

1. enter and exit events fired for cues, (not supported by all browsers as at October 2015).
2. cuechange events fired for TextTrack objects (good support).

Example of cuechange listener on TextTrack:

1. // track is a loaded TextTrack
2. track.addEventListener(“cuechange”, function(e) {
3.    var cue = this.activeCues[0];
4.    console.log(“cue change”);
5.    // do something with the current cue
6.  });

In the above example, let’s assume that we have no overlapping cues for the current time segment. The above code listens for cue change events: when the video is being played, the time counter increases. And when this time counter value reaches time segments defined by one or more cues, the callback is called. The list of cues that are in the current time segments are in this.activeCues;  where this represents the track that fired the event.

In the following lessons, we show how to deal with overlapping cues (cases where we have more than one active cue).

Example of enter and exit event listeners on a TRACK’S cues:

1.  // iterate on all cues of the current track
2.  var cues = track.cues;
3.  for(var i=0, len = cues.length; i < len; i++) {
4.    // current cue, also add enter and exit listeners to it
5.    var cue = cues[i];
6.    addCueListeners(cue);
8.    …
9.  }
10.  
11. function addCueListeners(cue) {
12.   cue.onenter = function(){
13.     console.log(‘enter cue id=’ + this.id);
14.     // do something
15.   };
17.   cue.onexit = function(){
18.     console.log(‘exit cue id=’ + cue.id);
19.      // do something else
20.   };
21. } // end of addCueListeners…

showing real examples of event listeners

Here is an example at JSBin that shows how to listen for cuechange events:

Source code extract:

1. function readContent(track) {
2.    console.log(“adding cue change listener to loaded track…”);
3.    trackStatusesDiv.innerHTML = “”;
5.    // add a cue change listener to the TextTrack
6.    track.addEventListener(“cuechange”, function(e) {
7.       var cue = this.activeCues[0];
8.       if(cue !== undefined)
9.          trackStatusesDiv.innerHTML += “cue change: text = ” + cue.text + “<br>”;
10.    });
12.    video.play();
13. }

And here is another modified version of this example at JSBin, that shows how to use enter and exit events on cues:

Source code extract:

1. function readContent(track) {
2.    console.log(“adding enter and exit listeners to all cues of this track”);
4.    trackStatusesDiv.innerHTML = “”;
6.    // get the list of cues for that track
7.    var cues = track.cues;
8.    // iterate on them
9.    for(var i=0; i < cues.length; i++) {
10.       // current cue
11.       var cue = cues[i];   
12.       addCueListeners(cue);
13.  }
15. video.play();
16. }
17.  
18. function addCueListeners(cue) {
19.    cue.onenter = function(){
20.       trackStatusesDiv.innerHTML += ‘entered cue id=’ + this.id + ” “
21.                                  + this.text + “<br>”;
22.    };
23.    cue.onexit = function(){
24.       trackStatusesDiv.innerHTML += ‘exited cue id=’ + this.id + “<br>”;
25.    };
26. } // end of addCueListeners…

Knowledge check 1.2.5 (not graded)

0 points possible (ungraded)What conditions are necessary for a video to fire events on a particular track?The track must be loaded and the mode property of its TextTrack object must be “hidden” or “showing”. Of course you have to define event listeners too in order to do something interesting.No particular conditions, just add event listeners and you’ll be good.