Introducing Player.js Support For Bunny Stream: Advanced Player Control and Monitoring API

We're excited to announce the launch of the Bunny Stream Playback Control API, a new feature for our Bunny Stream player. This offers you a standardized method based on Player.js to programmatically control and integrate our Bunny Stream player across your different web components, platforms, or services.

Now you have the power to easily control and monitor our Bunny Stream player to create advanced video functionalities, and rich user experiences. Utilize data-driven insights for strategic decision-making and elevate user engagement to hop to new heights.

This development reflects our ongoing commitment to simplifying video delivery, and providing you with cutting-edge tools you need to provide exceptional experiences on the fastest global network!

Key Features and Use Cases:

• Enhanced Interactive Media:  Improve your videos with programmatic playback controls like play, pause, and seek. Let viewers pick parts of the video to watch, mute or unmute, and change the volume as they desire.
  
• Playlist Management Made Easy: Quickly create and manage your playlists, ideal for platforms with lots of videos, like educational materials or TV series.
  
• Enhanced Analytics and Tracking: Collect and analyze data on how users interact with Bunny Stream players. Gain insights into user behavior, guide your content strategy, and assess the impact of your videos.
  
• Other Applications: Improve error management for smooth video playback, create a gallery with multiple video players, and synchronize with other website elements for a greater interactive experience, and many other possibilities for applications needing custom media control implementations.
  

How It Works:

At bunny.net, we build on open standards and believe that they are key to promote compatibility, interoperability, and innovation. We've enabled this feature by integrating the Player.js library, which is designed specifically for interacting with iframes supporting the Player.js open standard specification. This library provides you with a standardized approach to integrate our player across different web components and video platforms, eliminating the need for third-party player integrations.

To use it, simply load the library alongside the Bunny Stream embed iframe player, and then create a player object. This object enables you to interact programmatically with the Player.js APIs through your website's JavaScript. If you would like to learn more about how to get the Bunny Stream embed player check out our documentation here.

Quick Start with the Playback Control API:

• Import Player.js: First, add the Player.js library to your HTML page. We've hosted it on bunny.net for your convenience.

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

• Set Up Player.js: Use the iframe player code generated via Bunny Stream to set up the player object:

<iframe id="bunny-stream-embed" src="https://iframe.mediadelivery.net/embed/197133/dc48a09e-d9bb-420a-83d7-72dc2304c034" width="720" height="400" frameborder="0" allow="autoplay"></iframe>

const player = new playerjs.Player(document.getElementById("bunny-stream-embed"));

• Interact with the player: After the player is ready, you can start using the events and methods provided by the player object to control your media content.

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

Ensure that both the Player.js library and the iframe are fully loaded before creating the player object. For more information about Playback Control, refer to our API documentation here.

Implementing Playback Control and Monitoring Examples

Below, you will find two easy-to-follow use cases, complete with sample code and CopePen access. These examples illustrate the practical application of custom player control and tracking functionalities.

First Sample Code - Playback Control

This is a simple demonstration on CopePen that shows how to use the library for basic playback control like Play, Stop, Pause, and Seek. It also uses methods to get and set current time, along with timing events to calculate the seek actions.

Here's what you'll find in this demo:

• It initializes, sets up, and loads the video player.
• It provides buttons for play, pause, and seeking within the video outside the player iframe.
• It listens for events when the video player becomes ready, plays, pauses, updates its time, or ends.
• It displays log messages and timestamps for video events.
  

Below is the code snippet that loads the Player.js library, the bunny.net's embed player, and sets up the player.

<!-- the Player.js library must be loaded before the iframe is loaded -->
<script type="text/javascript" src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"></script>

<!-- Buttons for video playback control -->
<iframe id="bunny-stream-embed" src="https://iframe.mediadelivery.net/embed/197133/dc48a09e-d9bb-420a-83d7-72dc2304c034" width="720" height="400" frameborder="0" allow="autoplay"></iframe>

// Create a Player.js instance with the 'bunny-stream-embed' element
const player = new playerjs.Player('bunny-stream-embed');

// Event handler when the player is ready
player.on('ready', () => {
console.log('Ready');
});

You can access our CopePen page to test and interact with it directly.

https://codepen.io/Raul-Vecchione/pen/KKEXJyY

Certainly, this sample code offers fundamental playback control to help you get started quickly. Based on your specific needs, you might want to add more control features and logics, such as volume and loops, based on your specific needs.

Second Sample Code - Progress Tracking

Here is another simple demonstration on CopePen that shows how to monitor and display a video's progress. It's focused on monitoring and displaying progress both in logs and on the page with a progress bar at the bottom of the player.

Here's what you'll find in this demo:

• Like in the last sample, the code sets up, initializes and loads the video player.
• The code listens for the timeupdate event and it calculates the video's current progress as a percentage, rounding it to the nearest 25%.
• It logs the progress percentage and updates a progress text element on the page.
  

In the last example, we provided the code snippet for setting up the player. Now, let's check a code snippet that implements the core logic utilizing timeupdate events to monitor the progress of video completion.

// Event handler for time updates when the player is playing
player.on('timeupdate', (timingData) => {

// Parse the JSON string to an object
const data = JSON.parse(timingData);
const currentTime = data.seconds;

// Calculate progress percentage and round to the nearest 25%
const progressPercentage = (currentTime / data.duration) * 100;
const progressRounded = Math.floor(progressPercentage / 25) * 25;

// Log the progress percentage
console.log('Progress Percentage: ' + Math.floor(progressPercentage) + "%");

});

You can access our CopePen page to test and interact with it directly.

https://codepen.io/Raul-Vecchione/pen/dyrVrMe

Indeed, this sample code is designed to offer basic playback monitoring to get you started quickly. For a more comprehensive data analysis, you would typically integrate a third-party analytics tool, such as Google Analytics, to collect all the metrics across all your players and to create insights, such as identifying the most-watched videos, most frequently skipped segments, and other valuable viewer behaviors.

Explore the Future of Video Streaming with bunny.net

With the Bunny Stream player and its new Playback Control API, you get a simple and standardized method for integrating our player into your web projects, along with the flexibility to customize the player to suit your project's unique design and user experience. Additionally, it enables you to collect vital user interaction data, assisting you in making data-driven decisions and refining your content strategies.

This powerful combination not only enriches the video experience but also boosts user engagement and cultivates customer loyalty.

We are always looking for innovative ways to help our customers achieve their goals. Check out our 2023 recap blog to stay updated on our latest developments, and keep an eye on us for future innovations – there are more exciting hops coming!