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 an NPM package, imports code from modules in the library, and uses web pack to bundle the code. (Alternatively, the Banner ES5 repo shows how to load the client library using a script tag. See the Installation page for more details on ways to load the library.)

See the Playing Video tutorial for an in-depth walkthrough.

App code

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

• Import the following from the client library:
  • The init and uiReady functions
  • The ShakaPlayer subclass, which is used to synchronize the remote player on the cloud connector with the local player in the web app
  • The Lifecycle object, which is used for managing transitions between foreground and background modes
• Inside the window load event listener:
  • Call the init() function to load the client library.
  • Create an instance of the ShakaPlayer, passing in the video element.
  • Tell the player to load the video. This also loads it in the remote player.
  • Tell the player to play the video. This also plays it in the remote player.
  • Call the uiReady() function to let the library know that you're done with setup.

import { init, uiReady, ShakaPlayer, lifecycle } from "senza-sdk";

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

let player;

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

• 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 (lifecycle.state == lifecycle.UiState.BACKGROUND) {
    await lifecycle.moveToForeground();
  } else {
    await lifecycle.moveToBackground();
  }
}

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

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

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.