Example: Player controls

In this example we'll implement the Ease Live Bridge for Web and make sure that Ease Live knows if the player controls are visible or hidden.

Ease Live introduces a new user experience paradigm. Traditionally, the real estate taken by the video player doesn't have a direct relationship with the UI placed on top. This means that the area covering the video has been free to use for other things, such as video player controls, share buttons, other recommended clips and so on.

Player controls are often displayed on mouse hover, like this:

This creates a conflict between the traditional viewing experience and Ease Live, because the mouse is now needed to interact with the broadcast.

The solution is to turn off player controls on hover, and rather trigger it on stage click. A stage click is when someone clicks on the video itself, and not the graphics that is placed on top of it:

Try to click around in the link below to get a feel for how the interactive graphics ties together with the player controls:

→ Link to Codesandbox example

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

Events to implement

• stage.clicked - notify your player that the user has clicked on the stage in the overlay
• player.controls - notify either player or overlay about the player control state.

stage.clicked

Whenever a user clicks on an interactive graphic in Ease Live, it will register the click and do something with it. However, if the user clicks on anything else, like the video in the background, we pass that click along via the bridge so that the website/app can do something with it, like displaying player controls. Whenever the stage is clicked, the controls property will toggle between the values visible and hidden.

player.controls

This is a two way event that is very similar to stage.clicked. The difference is that where stage.clickedis being triggered when someone clicks the stage of the overlay, this event doesn't assume such a click. Basically, just use it to notify what state you'd like player controls to be in.

Video.js example: Toggle player controls when someone clicks on the overlay stage

bridge.on("stage.clicked", ({ controls }) => {
  player.controls(controls === "visible");
});

Video.js example: Send a new player control state from the player to the overlay

If you want to control the player controls visibility from the player, remember to notify Ease Live about the change:

player.controls(false);
bridge.emit("player.controls", {
  controls: "hidden"
})

→ 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