Example: Player speed

In this example we'll implement the Ease Live Bridge for Web and make sure that Ease Live and the player can communicate changes to video playback rates.

Try to change the video playback rate from Ease Live in the example link below. You will see that the video changes its playing speed.

→ Link to Codesandbox example

Feel free to fork it and play around with the example.

Events to implement

• player.speed - notify Ease Live whenever the playback rate changes

Events are messages passed back and forth from the browser/native app to the Ease Live overlay. You can pass them like this:

bridge.emit('any.message', {
  some: 'value'
});

player.speed

The value indicates the rate at which the video should play back. Examples:

• If set to 1, the video will play normally
• If set to 2, the video will play twice as fast
• If set to 0.5, the video wil play half as fast

Whenever the player changes the playback rate, make sure to notify Ease Live. Here's a Video.js example:

// Check for playback rate changes in Video.js and send it to Ease Live
player.on("ratechange", () => {
  bridge.emit("player.speed", {
    speed: player.playbackRate()
  });
});

If a playback rate change has been triggered from the Ease Live overlay, you can pick up the value like this:

// Check for playback rate changes coming from the Ease Live overlay
bridge.on("player.speed", ({ speed }) => {
  player.playbackRate(speed);
});

→ Link to Codesandbox example

Test in your own app

If you want to test it in your own app, we've gathered the main Bridge examples into a single package for you to load into the Bridge SDK.

→ Link to Ease Live Play

Install the package in your existing project

The recommended way is to install the "SDK installation project" package directly into your Studio project that you're already working on. You can find it in the Package store in the editor.

Or use the project directly in your app

If you prefer to load in the SDK installation project directly, you can do that as well by using the following parameters when loading in the Bridge SDK:

• accountId → tutorials
• programId → 2d2711ff-6ff2-41c1-a141-060e9ffa2c38