Guides

Playing Video

Seamlessly switching between web apps and streaming video

Suggest Edits

The Senza platform has two modes:

  1. It can use a web browser in the cloud to run HTML5 apps with rich content, including video.
  2. It can stream the video directly, without the need to consume the resources required for a web browser. 

If your web app plays a video fullscreen, Senza can seamlessly switch between these two modes. This gives you the power to use web technologies whenever you want to, and the efficiency of streaming directly to the client when you don't need them.

This app is the Reference Implementation for integrating the client library.

Banner

For this demo, we'll add a "Welcome to Senza" banner that displays on top of the video. 

  1. When we want to show the banner, we'll switch to foreground mode to see the browser.
  2. When we want to hide the banner, we'll switch to background mode and stream the video.

Code

We can start with some HTML in index.html :

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Senza!</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="main">
    <video id="video" width="1920" height="1080" muted="muted"></video>
    <div id="banner">
      Welcome to Senza
    </div>
  </div>
</body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</html>

And a little bit of CSS in styles.css to make our banner look pretty:

@font-face {
  font-family: Montserrat;
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2);
}

body {
  width: 1920px;
  height: 1080px;
	margin: 0px;
	background-color: black;
  overflow: hidden;
}
  
#main {
  position: relative;
  width: 1920px;
  height: 1080px;
	background-color: white;
  text-align: center;
}

#banner {
  position: absolute;
  width: 1800px;
  height: 175px;
  top: 800px;
  left: 60px;
  color: white;
  padding-top: 45px;
  font: 80pt Montserrat;
  font-weight: 500;
  background-color: black;
  background-image: url("images/gradient.jpg");
  filter: drop-shadow(0px 10px 15px black);
  border-radius: 20px;
  z-index: 2;
  opacity: 0.9;
}

Then create a index.js file for your script.

Webpack

We're going to use webpack to transpile all your scripts, including the client library, into one bundle.
First, make sure you have installed Node.js and the Client Library.

Create a package.json file like this:

{
  "name": "banner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "senza-sdk": "^4.2.6",
  }
}

When you import the senza-sdk package, it will also install the Shaka player as a dependency. That will let you use our subclass of the Skaka player to play video both in your app and on the cloud connector.

And a webpack.config.js file like this:

const path = require("path");
 
module.exports = {
    entry: ["./index.js"],
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
};

Run the following commands once to download the required node modules. This will create a node_modules folder and a package-lock.json file.

npm install
npm ci

Now each time you make changes to the banner.js file, run the webpack command to update the bundle.js file in the dist folder:

npx webpack -w --config webpack.config.js

The -wflag tells the command to stay running, and it will continuously watch your code for changes. That way you don't have to run the command each time you modify your code.

You'll want to load the page using your local web server. See Viewing Your App for details, as well as instructions on how to turn on your local web server.

When you load the page you'll see the banner on top of the video.

Shaka Player subclass

We're going to use a subclass of the Shaka Player to help us play video on Senza. It works just like the ordinary Shaka Player, except it also manages the Remote Player for you so you can stream video directly to the cloud connector. See the Reference Integration page for more details.

Playing video with Senza

Now for the fun part! We're going to use the Senza client library to configure the player so that it can play our favorite bunny video. Let's add some code to the index.js.

First, import the things we'll need from the Senza library, as well as the Shaka player. Also define a constant with the URL for our video resource.

import * as senza from "senza-sdk";

let options = {
  "url": "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
}

let player;

When the page loads, we will:

  • Call the senza.init() function from the client library.
  • Create an instance of the Senza Shaka Player.
  • Call player.attach() with the media element.
  • Load the video by calling player.load() method with the URL.
  • Play the video by calling video.play() on the media element.
  • Call the senza.uiReady() function when the user interface is ready.

You'll notice that several of these functions run asynchronously, so we call them using the await keyword.

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

Remote Control input

We can handle button presses on the Remote Control by listening for keydown events.

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

The remote control buttons will do the following:

  • The OK button (enter key) will toggle between foreground and background modes. When the app is in the foreground the video plays in the local player, and when it is in the background the video plays in the remote player.
  • The back button (escape key) will pause or play the video.
  • The left and right arrow keys will skip backwards and forwards by 30 seconds.

Here are a few helper functions that we'll use to toggle back and forth between different states:

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

Try it out

That's really about it for the implementation of the app! Most of the details are handled by the Senza Shaka Player. See the Reference Integration page for more details on the implementation.

Try viewing your app in the device simulator or on a cloud connector device to see how it works! When you load the page you'll see the video start playing. Try pressing OK to toggle between foreground and background modes, back to pause or play the video, left to skip backwards, and right to skip forwards.

You've learned in this demo how easy it can be to play video in the local player using the web browser, to stream the video directly to the device using the local player, and to switch back and forth.

Keep reading if you'd like to learn about a few extensions to the app that add additional functionality.

Auto Background

Using the OK button to toggle between foreground and background mode is a great way for you to understand how the platform works. But in a production app, you would want to move to background automatically rather than manually.

Conveniently, the Lifecycle object has an auto background feature that will automatically move to background after a period of inactivity. Then if the user presses any button, it will move back to the foreground. You can turn it on and configure the delay like this:

let options = {
  ...
  "autoBackground": true,
  "delay": 15
}

senza.lifecycle.autoBackgroundDelay = options.delay;
senza.lifecycle.autoBackground = options.autoBackground;

Video resolution

The Big Buck Bunny video in this example uses adaptive bitrate streaming, with video tracks up to 4K resolution. Playing in 4K makes the player do more work than necessary, as the Senza platform streams video in HD resolution. We can configure the Shaka player to limit the video resolution like this:

let options = {
  ...
  "maxHeight": 1080
}

player.configure(playerConfig());

function playerConfig() {
  return {abr: {restrictions: {maxHeight: options.maxHeight}}};
}

As the video has information about the current video track burned in to the video, you'll notice that when you run the app now it goes up to 1920 x 1080 resolution.

Protected content

Using the regular Shaka player, the only thing you need to do to play Protected Content is to specify the URL of the license server, as explained in Shaka's DRM Configuration tutorial.

When you use the Senza subclass of the Shaka Player, you can also play the same protected content in background mode using the Remote Player… with zero additional work! Here's how to set the license server:

let options = {
  "url": "https://cdn.bitmovin.com/content/assets/art-of-motion_drm/mpds/11331.mpd",
  "licenseServer": "https://cwip-shaka-proxy.appspot.com/no_auth"
}

player.configure(playerConfig());

function playerConfig() {
  let config = {abr: {restrictions: {maxHeight: options.maxHeight}}};
  if (options.licenseServer) {
    config.drm = {servers: {"com.widevine.alpha": options.licenseServer}};
  }
  return config;
}

When you run the app with the example protected stream and license server above, you'll see that the content plays as expected in both foreground and background mode.

URL options

Let's make a small change to the options object so that we can specify options in the URL:

let options = {
  "url": getParam("url", "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"),
  "licenseServer": getParam("licenseServer", null),
  "autoBackground": getParam("autoBackground", "true") == "true",
  "delay": Number(getParam("delay", 15)),
  "maxHeight": Number(getParam("maxHeight", 1080))
}

function getParam(name, defaultValue = null) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.has(name) ? urlParams.get(name) : defaultValue;
}

Now you can override the options at runtime when you link to the app like this:

Updated about 2 months ago

What’s Next