THEOplayer 3.X | Demo | Using Events

This page demonstrates how you hook to player events with the THEOplayer API. With events, you can create custom logic, such as logging a message when an ad starts, or exporting data to a remote server when someone presses the fullscreen button.

With THEOplayer you can hook to all kind of events: player events, ad events, text track events, media track events, ...

Below a few of these events are illustrated. Select an event to see how you could implement it. Disable your adblocker if you want to check the adbegin event. Enable a text track if you want to check the enter event.

Select event

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!');
    });
});

Detected events

Time	Event	Data

THEOplayer 3.X Demo: Using Events

Detected events