Playback control API

The Bunny.net Stream Player offers a rich set of events and methods through its embeddable iframe player, enabling external programmatic interaction with playback sessions. To ensure standardization and ease of integration, the embeddable iframe player employs the player.js JavaScript library.

📘

Note

For more information, see detailed documentation available at player.js website.

Player.js library is hosted on Bunny.net CDN so you can easily integrate it in your website by including the following script block in your HTML:

<script type="text/javascript" src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"></script>

Quickstart

After loading the library and embedding the Player iframe, you can create a player object and interact with it using various events and methods. The following example illustrates the basic usage:

const player = new playerjs.Player('iframe');

player.on('ready', () => {
  player.on('play', () => {
    console.log('play');
  });

  player.getDuration(duration => console.log(duration));

  if (player.supports('method', 'mute')) {
    player.mute();
  }

  player.play();
});

Methods

The Bunny.net Stream Player provides the following methods for controlling playback:

play: void - Play the media. Example:

player.play();

pause: void - Pause the media. Example:

player.pause();

getPaused: boolean - Determine if the media is paused. Example:

player.getPaused(function(value){
  console.log('paused:', value);
});

mute: void - Mute the media. Example:

player.mute();

unmute: void - Unmute the media. Example:

player.unmute();

getMuted: boolean - Determine if the media is muted. Example:

player.getMuted(value => console.log('muted:', value));

setVolume: void - Set the volume. Value needs to be between 0-100. Example:

player.setVolume(50);

getVolume: number - Get the volume. Value will be between 0-100. Example:

player.getVolume(value => console.log('getVolume:', value));

getDuration: number - Get the duration of the media is seconds. Example:

player.getDuration(value => console.log('getDuration:', value));

setCurrentTime: number - Perform a seek to a particular time in seconds. Example:

player.setCurrentTime(50);

getCurrentTime: number - Get the current time in seconds of the video. Example:

player.getCurrentTime(value => console.log('getCurrentTime:', value));

off: void - Remove an event listener. If the listener is specified it should remove
only that listener, otherwise remove all listeners. Example:

player.off('play');

player.off('play', playCallback);

on: void - Add an event listener. Example:

player.on('play', () => console.log('play'));

supports: ['method', 'event'], methodOrEventName - Determines if the player supports a given event or method. Example:

player.supports('method', 'getDuration');
player.supports('event', 'ended');

Events

The Bunny.net Stream Player provides a set of events that can be used to enhance and customize your media playback experience. These events can be attached using the onmethod in the player.js script.

Event list

The Bunny.net Stream Player emits the following player.js events that can be attached using the onmethod:

ready- Fired when the media is ready to receive commands.

📘

Note

As outlined in the PlayerJs Spec, there may be inconsistencies if multiple players on the page have the same source src. To address this, append a UUID or a timestamp to the iframe's srcto ensure all players on the page have a unique source.

fired when the media is ready to receive commands. This is fired regardless of listening to the event. Note: As outlined in the PlayerJs Spec, you may run into inconsistencies if you have multiple players on the page with the same src. To get around this, simply append a UUID or a timestamp to the iframe's src to guarantee that all players on the page have a unique src.

progress- Fires when the media is loading additional media for playback. Example:

{
  percent: 0.8,
}

timeupdate - Fires during playback. Example:

data: {
  seconds: 10,
  duration: 40
}

play- Fires when the video starts to play.

pause- Fires when the video is paused.

ended- Fires when the video is finished.

seeked - Fires when the video has been seeked by the user.

error - Fires when an error occurs.