Example: Player time jump

In this example we'll implement the Ease Live Bridge for Web and make sure that the Ease Live overlay can tell the video player to jump to a specific point in time.

This is useful when you want to let the overlay control playback position, for example when a user clicks a "jump to" button in the overlay graphics to skip to a specific moment in the video.

→ Link to Codesandbox example

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

Events to implement

• player.time - send the current timecode to Ease Live, and receive time jumps from the overlay

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'
});

Sending player.time to Ease Live

First, make sure you're sending the current player time to the overlay on every time update. In this example, the VOD stream doesn't have embedded timecodes, so we calculate an absolute timecode from a known start time and the player's relative position.

// Known start time for this VOD clip
const startTime = 1772578800000;

// Send player time to the overlay on every time update
player.on("timeupdate", function () {
  const relativeTime = parseInt(player.currentTime()) * 1000;
  const timecode = startTime + relativeTime;
  bridge.emit("player.time", {
    timecode // unix timestamp in milliseconds
  });
});

Receiving player.time from the overlay

This is the key part. When the overlay sends a player.time event, the player should jump to the corresponding position in the video.

Since we're already emitting player.time to the overlay on every time update, we need to make sure we only listen for events that originate from the overlay — not the ones we just sent. The third parameter fromSdkOnly set to true ensures we only receive events emitted by the SDK and overlay, not our own.

/**
 * Listen for player.time from the overlay
 * @param {string} event - Event name
 * @param {function} listener - Event handler
 * @param {boolean} fromSdkOnly - Only receive events from the SDK/overlay, not our own
 */
bridge.on(
  "player.time",
  (payload) => {
    // Convert absolute timecode back to relative time in seconds
    const newRelativeTime = (payload.timecode - startTime) / 1000;
    player.currentTime(newRelativeTime);
  },
  true // fromSdkOnly: ignore events we emitted ourselves
);

TIP

The fromSdkOnly parameter (third argument) is important here. Without it, you'd create an echo loop: the player jumps to a time, which triggers timeupdate, which emits player.time, which triggers another jump, and so on.

→ Link to Codesandbox example

Test in your own app

Use the following SDK values to load this example UI into your own app to test:

• accountId → tutorials
• programId → sdk-player-time-jump

Video stream URL (if you need one): https://edge.stream.easelive.tv/vod/_definst_/s3/smil:vod-assets-ireland-sixty-no/wowza/client/tippeligaen/Fotball_vod.smil/playlist.m3u8