Reference Implementation

Here is some code that puts together all the necessary calls to the client library for managing the application lifecycle and playing video in the remote player.

The Banner sample code app contains all the code below. It loads the Client Library from client library using a script tag. The Banner Pro app shows how to load the code from an NPM package, and has some more advanced features.

See the Playing Video tutorial for an in-depth walkthrough, and the Program Guide tutorial for an example of how to integrate an existing app. You can also use ChatGPT to integrate your app with just a single prompt.

App code

The is literally the entire source code for the Banner app's main banner.js script.

Inside the window load event listener:

• Call the senza.init() function to load the client library.
• Create an instance of the senza.ShakaPlayer subclass.
• Tell the player to attach to the video element.
• Tell the player to load the stream. This also loads it in the remote player.
• Tell the video element to play. This also plays it in the remote player.
• Call the senza.uiReady() function to let the library know that you're done with setup.

import * as senza from "senza-sdk"; // only if you are using the NPM package

const url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";

let player;

window.addEventListener("load", async () => {
  try {
    await senza.init();
    player = new senza.ShakaPlayer();
    await player.attach(video);
    await player.load(url);
    await video.play();
    senza.uiReady();
  } catch (error) {
    console.error(error);
  }
});

Key presses

Implement an event listener for key presses:

• The OK button toggles between foreground and background modes.
• The Back button pauses or plays the video.
• The left and right buttons skip backwards and forwards.

document.addEventListener("keydown", async function (event) {
  switch (event.key) {
    case "Enter": await togglePlayback(); break;
    case "Escape": playPause(); break;
    case "ArrowLeft": skip(-30); break;
    case "ArrowRight": skip(30); break;
    default: return;
  }
  event.preventDefault();
});

The key listener calls a few helper functions for toggling state:

async function toggleBackground() {
  if (senza.lifecycle.state == senza.lifecycle.UiState.BACKGROUND) {
    await senza.lifecycle.moveToForeground();
  } else {
    await senza.lifecycle.moveToBackground();
  }
}

async function playPause() {
  if (video.paused) {
    await video.play();
  } else {
    await video.pause();
  }
}

function skip(seconds) {
  video.currentTime = video.currentTime + seconds;
}

Shaka Player

The ShakaPlayer subclass takes care of synchronizing the state between the local player and the remote player:

• When you call load() to load a video, it is also loaded in the remote player.
• When you call play() or pause() on the media element, the playback state is also changed in the remote player.
• When you set the currentTime on the media element, the current time is also changed on the remote player.

When you call the Lifecycle moveToForeground() and moveToBackground() methods, it switches seamlessly between playing video in the browser and directly on the cloud connector.

Auto Background

You can use the auto background feature to move to background automatically after a period of inactivity:

senza.lifecycle.autoBackground = true;
senza.lifecycle.autoBackgroundDelay = 15;