Example: Player video scale

In this example we'll implement the Ease Live Bridge for Web and handle video scale events.

Video scale events are sent when the UI requests a change to the position and size of the video. This is typically used to achieve the squeezeback effect, where the video shrinks and moves to a specific region of the UI.

As the video element is outside of Ease Live, and implementations may differ, we instead send the player.videoscale event with the values necessary to achieve the desired animation.

→ Link to Ease Live Play
→ Link to Codesandbox example

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

Event to listen to

• player.videoscale - received when Ease Live requests an animation for the video element

Event payload

• scaleX: Horizontal scale factor, between 0 and 1
• scaleY: Vertical scale factor, between 0 and 1
• pivotX: Horizontal anchor for the scaling animation, between 0 and 1
• pivotY: Vertical anchor for the scaling animation, between 0 and 1
• duration: Duration of the scale animation in milliseconds, example 400 (ms)

Handling the event

// Helper to convert scalar multipliers to percentage
const scalarToPercent = (scalar) => `${scalar * 100}%`;

// Handle player.videoscale event
bridge.on("player.videoscale", ({
  pivotX, pivotY, scaleX, scaleY, duration
}) => {
    // Update the pivot point
    video.style.transformOrigin = `${scalarToPercent(pivotX)} ${scalarToPercent(pivotY)}`;

    // Animate the video element
    video.animate({
      transform: `scale(${scalarToPercent(scaleX)}, ${scalarToPercent(scaleY)})`,
    }, {
      duration,
      fill: "forwards",
    });
  }
);

→ Link to Codesandbox example

Test in your own app

If you want to test it in your own app, here are two options:

1. Install the package into your existing project

The recommended way is to install the "Bridge SDK: Player video scale" package directly into your Studio project that you are already working on. You can find it in the Package store in the editor.

2. Or use the project directly in your app

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

• accountId → tutorials
• projectId → 81df119b-79ef-4574-a943-74ec1d127bdd
• programId → eda3fb46-c3f5-4823-9d13-d138119dde14