Playback control API

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/playerjs-latest.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 Stream Player provides the following methods for controlling playback: play: Play the media. Example:

player.play();

pause: Pause the media. Example:

player.pause();

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

player.getPaused((value) => console.log("paused", value));

mute: Mute the media. Example:

player.mute();

unmute: Unmute the media. Example:

player.unmute();

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

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

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

setLoop: boolean - Set whether the media should replay when it reaches the end. Example:

player.setLoop(true);

getLoop: boolean - Determine whether the media is set to loop. Example:

player.getLoop((value) => console.log("getLoop", value));

setPlaybackRate: number - Set the playback speed. Example:

player.setPlaybackRate(1.5);

getPlaybackRate: number - Get the current playback speed. Example:

player.getPlaybackRate((rate) => console.log("getPlaybackRate", rate));

The playback rate methods need player.js 0.1.2 or later. On earlier versions, and on the upstream Embedly build, send the command instead:

player.send({ method: "setPlaybackRate", value: 1.5 });

off: 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: 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 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 on method in the player.js script.

Event list

The Bunny Stream Player emits the following player.js events that can be attached using the on method: ready - Fires when the media is ready to receive commands. This fires whether or not you are listening for it. Its payload carries src, events and methods, which is what makes supports accurate.

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 src to ensure all players on the page have a unique source.

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

data: {
  percent: 0.8,
  seconds: 32,
  duration: 40
}

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. playbackratechange - Fires when the playback rate changes. The callback receives the new rate:

player.on("playbackratechange", (rate) => console.log("playbackRate", rate));

error - Fires when a command fails, and when the media itself fails to play. A failed command carries a code and a message. A media error carries an empty payload. Example:

data: {
  code: 2,
  msg: 'Invalid Method "foo"'
}

Code	Meaning	Message
`2`	The method name is not valid.	`Invalid Method "foo"`
`5`	The call threw. Most often a `play()` the browser refused because autoplay was blocked.	The text of the thrown error.

Requirements

The control API only works when the player runs inside an iframe. Nothing is sent on a direct playback URL. Separately, if your library restricts playback to specific domains, the embed needs a referrer to load at all. Keep a policy on the iframe that sends the origin, as described in Embedding restrictions:

<iframe referrerpolicy="strict-origin-when-cross-origin" ...>

Documentation

Features

Manage Videos

Playback

Reference

Quickstart

Methods

Events

Event list

Requirements

​Quickstart

​Methods

​Events

​Event list

​Requirements

Quickstart

Methods

Events

Event list

Requirements