Using Events

The playing event occurs after the play event, when the content is effectively playing.

player.addEventListener('playing', function(e) {
    console.log('playing event detected!');
    
    // export event to remote server
    var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
    xmlhttp.open("POST", "https://mywebsite.com/post-request-handler");
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.send(JSON.stringify({ event: "playing", videoSource: player.src }));
});

The pause event occurs when the viewer clicks the pause button, or when toggled through the API.

player.addEventListener('pause', function(e) {
    console.log('pause event detected!');
});

The adbegin event occurs when an ad starts to play.

player.ads.addEventListener('adbegin', function(e) {
    console.log('adbegin event detected!');
});

The enter event occurs when a cue is being display in the UI.

// detect tracks being added to the player
player.textTracks.addEventListener('addtrack', function(e0) {
    // detect cues being added to the track
   e0.track.addEventListener('addcue', function(e1){
       // detect a cue being shown from a track
       e1.cue.addEventListener('enter', function(e2) {
            console.log('enter event detected!');
       });
   });
});

The activequalitychanged event occurs when the active video quality changes.

// detect video tracks being added to the player
player.videoTracks.addEventListener('addtrack', function(e0) {
    // detect quality changes of a track
    e0.track.addEventListener('activequalitychanged', function(e1) {
        console.log('activequalitychanged event detected!');
    });
});