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 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 API documentation (http://bitmovin.com/player-documentation/player-api-6-0-0/).

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

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

Example 1

In this example, we will use the “onSeeked” event in order to display the current position in the video.

Whenever the user will seek into the video, the page will display a string containing the value of the current time.
In this example, updateTime() is a function that print a String under the player.

  
player.setup(conf).then(function(value) {
        // Success
      }, function(reason) {
        // Error!
      });
var player = bitmovin.player("player");
player.addEvenHandler(bitmovin.player.EVENT.ON_SEEKED, function(seekEvent){
    updateTime(JSON.stringify(player.getCurrentTime()));
});

Try to seek into the video timeline while the video is playing in order to generate an “onSeeked” event. The current time will be displayed under the video each time a onSeeked event will be handled.

If needed in your use case, you can of course remove the event handler by calling the removeEventHandler as below

removeEventHandler(bitmovin.player.EVENT.ON_SEEKED, eventHandler)

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

var playlist = [
    { 
      "name": "Sintel",
      "dash": "https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd",
      "hls":  "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    },
    {
      "name": "Bitmovin Demo Video",
      "dash": "//bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
      "hls:": "//bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
    },
    { 
      "name": "Sintel 2",
      "dash": "https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd",
      "hls":  "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    }
  ];

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.

  var conf = {
    key:       "YOUR KEY HERE",
    source : {dash: playlist[0].dash, hls: playlist[0].hls},
    events: {
      onPlaybackFinished: function() {
        if(i < playlist.length) { 
          player.load({dash: playlist[i].dash, hls: playlist[i].hls});
          i++; 
        }
      }, 
      onReady: function() { 
        if(i > 0) {
          player.play();
        }  
      }
    }
  };

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

Back to Top
Simple Share Buttons