Reference Integration

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.

These examples are taken from the Unifed Player sample app, and explained in greater detail in the Playing Video tutorial.

App code

The is literally the entire source code for the main index.js script in the Banner app.

• Imports
  • Import the client library'sinit and uiReady functions.
  • Import the UnfiedPlayer class. See below for an interface description.
• Inside the window load event listener:
  • Call the library's init() function to load it.
  • Create an instance of the UnifiedPlayer, passing in the video element.
  • Tell the player to load the video into both the local player and remote player.
  • Tell the player to play the video.
  • Call the uiReady() function to let the library know that you're done with setup.

import { init, uiReady } from "senza-sdk";
import { UnifiedPlayer } from "./unifiedPlayer.js";

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

let unifiedPlayer;

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

• Implement an event listener for key presses:
  • The OK button toggles between foreground and background mode.
  • The Back button pauses or plays the video.
  • The left and right buttons skip backwards and forwards.
  • The up and down buttons are not used in this app.

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 togglePlayback() {
  if (unifiedPlayer.isInRemotePlayback) {
    await unifiedPlayer.moveToLocalPlayback();
  } else {
    unifiedPlayer.moveToRemotePlayback();
  }
}

function playPause() {
  if (unifiedPlayer.paused) {
    unifiedPlayer.play();
  } else {
    unifiedPlayer.pause();
  }
}

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

Unified Player

The UnfiedPlayer class, which you can download and use in your app, helps you manage the local player (the one in your browser) and the remote player (the one in the device) with a single interface that is very similar to a typical player such as Shaka. The source code is public so you can see how it works and extend it as needed.

Constructor

• UnifiedPlayer(videoElement) — pass in the video element to use in the local player

Properties

• currentTime — get/set the current playback timecode
• duration — get the length of the current media in seconds
• paused — get whether the player is currently paused

Functions

• (async) load(url) — loads a video, but does not play it automatically
• (async) play() — plays the video that has been loaded
• pause()— pauses the video (local player only)
• isInRemotePlayback()— returns whether the remote player is active
• moveToRemotePlayback() — switches from the local player to the remote player
• (async) moveToLocalPlayback() — switches from the remote player to the local player
• configureDrm(server) — allows you specify the DRM server

Events

The class fires the following events:

• event:ended — Indicates that the media has ended.
• event:error — Indicates that an error occurred.
• event:timeupdate — Indicates that the current playback time has changed.

These events are emitted only by the local player:

• canplay — Indicates that the media is ready to play.event
• seeking — Indicates that the player is seeking.event
• seeked — Indicates that the player has finished seeking.event
• loadedmetadata — Indicates that the player has loaded metadata.event
• waiting — Indicates that the player is waiting for data.event