Working with event handlers

Introduction

When a user interacts with the player or when something happens like an ad is skipped or at the start/end of playback, the Bitmovin Player generates a signal (event). These events can then be collected by an event handler and processed by a callback to trigger an action or actions that are specific to the original event.

Following the event process described below, it is possible to build interactive webpages based on the Bitmovin Player Web SDK.

A complete list of the Bitmovin Player events is available on the “Event” section of our Javascript API documentation.

Adding Event Handlers to an active player

It is necessary to create an Event Handler dedicated to the event you want to connect. The Event Handler will take as parameters, the type of event you want to deal with (ex: Paused) and a callback which is the function that will be triggered whenever the event happens. The callback takes an object returned by the event as parameters.

An Event Handler can be removed through the method off(eventName, eventHandler):

player.off(bitmovin.player.PlayerEvent.Seek, seekHandler);

Example 1

const player = new bitmovin.player.Player(htmlElement, conf);
player.load(source).then(function(value) {
    // Success
}).catch(function(reason) {
    // Error!
});
player.on(bitmovin.player.PlayerEvent.Seek, function(seekEvent) {
    updateTime(JSON.stringify(player.getCurrentTime()));
});

//Helper method: 
function updateTime(time) {
    document.getElementById("event").innerHTML = "The video has been seeked to " + JSON.stringify(player.getCurrentTime()) + "s";
}

Configuring event handlers in the configuration object

Another way to implement event handlers is to define them in the dedicated section of the configuration object (before instancing the player).

Example 2

This example consists on creating a playlist based on events and handlers. Basically, a playlist is an array of paths to different objects (the media):

const playlist = [
    {
        dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
        hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
        title: 'Playlist Example 1',
        description: 'This example shows a simple playlist implementation using the Javascript API of the Bitmovin Player!',
        options: {
            startTime: 205
        }
    },
    {
        dash: 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
        hls: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        title: 'Playlist Example 2',
        description: 'Blender Foundation',
        options: {
            startTime: 883
        }
    },
    {
        dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
        hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
        title: 'Playlist Example 3',
        description: 'Redbull - Art of Motion',
        options: {
            startTime: 200
        }
    }
];

let i = 0;
const conf = {
    key: 'YOUR-BITMOVIN-PLAYER-LICENSE-KEY',
    events: {
        sourceloaded: function () {
            player.play();
        },
        playbackfinished: playNextVideo
    }
};

function playNextVideo() {
    if (i < playlist.length) {
        var nextSource =  playlist[i];
        i++;
        player.load(nextSource).then(function() {
            console.log('now playing: ' + nextSource.title);
        });
    } else {
        console.log('playlist finished');
    }
};

const player = new bitmovin.player.Player(document.getElementById('player'), conf);
playNextVideo();

Conclusion

Events and handlers can really unleash the interactions between the player and the rest of your JavaScript code, then the interactivity between the player and your users.

In order to explore the possibilities of the event handlers, you can look at our documentation and test Bitmovin Player for free.