Example: Player volume & mute

In this example we'll implement the Ease Live Bridge for Web and make sure that Ease Live knows about the volume and mute settings in the player.

You can also configure the bridge implementation so that Ease Live can modify the player's volume and mute settings. This can be useful if you're loading in a second video clip in the overlays and want to mute or lower the volume on the main video stream while the clip is playing.

Try to change the volume and mute settings in both the Video.js player controls and Ease Live graphics in the example link below. You will see that the values are in sync.

→ Link to Codesandbox example

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

Events to implement

• player.volume - notify Ease Live whenever the player volume changes
• player.mute - notify Ease Live whenever the player is muted or unmuted

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

Whenever the user changes the volume setting in the player control, make sure to notify Ease Live about the volume change. Here's a Video.js example:

// Video.js triggers this event on every volume change
player.on("volumechange", () => {
  // Video.js volume range is from 0 to 1, while Ease Live is from 0 to 100
  bridge.emit("player.volume", {
    volume: Math.round(player.volume() * 100, 10)
  });
});

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

// Ease Live trigges this event every time someone changes
// the volume within the overlays
bridge.on("player.volume", ({ volume }) => {
  // Video.js volume range is from 0 to 1, while Ease Live is from 0 to 100,
  // so we need to convert it to 0-1 before passing it to video.js
  player.volume(volume / 100);
});

player.mute

Whenever the user mutes the volume, make sure to notify Ease Live about the muted change. Here's A Video.js example:

// We store muted value locally since video.js doesn't have a muted event.
// We need to check if the mute value has changed when volumechange is triggered
// so we don't send `player.mute` on every volume change.
let mutedValue = player.muted();
player.on("volumechange", () => {
  if (player.muted() !== mutedValue) {
    mutedValue = player.muted();
    bridge.emit("player.mute", {
      mute: player.muted()
    });
  }
});

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

bridge.on("player.mute", ({ mute }) => {
  player.muted(mute);
});

→ 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