Using Events
This page demonstrates how you hook to player events with the THEOplayer API.
With THEOplayer you can hook to all kind of events: player events, ad events, text track events, media track events and many more.
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.
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 |
---|