Demo THEOplayer

Using Events

This page demonstrates how you hook to player events with the THEOplayer API.

logo-01

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

Detected events

Time Event Data

Still wasting time debugging video playback problems?

Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.