[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

How to work with event handlers

IntroductionLink Icon

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 HTML5 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 HTML5 Player.

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 playerLink Icon

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: onPause) 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 removeEventHandler(eventName, eventHandler):

1player.removeEventhandler(bitmovin.player.EVENT.ON_SEEK, seekHandler);

Example 1

1player.setup(conf).then(function(value) {
2 // Success
3 }, function(reason) {
4 // Error!
5 });
6player.addEventHandler(bitmovin.player.EVENT.ON_SEEKED, function(seekEvent){
7 updateTime(JSON.stringify(player.getCurrentTime()));
8});
9
10//Helper method:
11function updateTime(time) {
12 document.getElementById("event").innerHTML ="The video has been seeked to "+JSON.stringify(player.getCurrentTime())+"s";
13}

Configuring event handlers in the configuration objectLink Icon

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):

1var playlist = [
2 {
3 dash: "//bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
4 hls: "//bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
5 title: "Playlist Example 1",
6 description: "This example shows a simple playlist implementation using the Javascript API of the Bitmovin Player!",
7 options: {
8 startTime: 205
9 }
10 },
11 {
12 dash: "https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd",
13 hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
14 title: "Playlist Example 2",
15 description: "Blender Foundation",
16 options: {
17 startTime: 883
18 }
19 },
20 {
21 dash: "//bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
22 hls: "//bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
23 title: "Playlist Example 3",
24 description: "Redbull - Art of Motion",
25 options: {
26 startTime: 200
27 }
28 }
29];

The target is to start playing the following media each time a playback has been completed. A solution consists on connecting the ‘onPlaybackFinished’ event to a function that will load the following media and the ‘onReady’ event to the method that start the playback.

1var i = 0;
2var conf = {
3 key: "YOUR-BITMOVIN-PLAYER-LICENSE-KEY",
4 events: {
5 onReady: function () {
6 if (i > 0) {
7 player.play();
8 } else {
9 playNextVideo();
10 }
11 },
12 onPlaybackFinished: playNextVideo
13 }
14};
15
16var playNextVideo = function () {
17 if (i < playlist.length) {
18 var nextSource = playlist[i];
19 i++;
20 player.load(nextSource).then(function () {
21 player.play();
22 console.log('now playing: ' + nextSource.title);
23 });
24 }
25};
26
27var player = bitmovin.player("player");
28player.setup(conf).then(function (value) {
29 console.log("Successfully created bitdash player instance");
30}, function (reason) {
31 console.log("Error while creating bitdash player instance");
32});

ConclusionLink Icon

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 and handlers, you can look at our documentation and test Bitmovin Player for free.

Give us feedback