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
playing
pause
adbegin
enter
activequalitychangedevent
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!');
});
});
©2016