Skip to main content

Chain play / Up Next

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with, at the end, the activation of up-next in combination with end of play.

Before starting​

Instantiation​

Write the Basic instantiation code. There's no additional code to write, unless you need to overwrite the autoplay behavior that the VideoMetadata contains.

Up next configuration​

Write the App() function to read the VideoMetadataMap as in the folllowing example, and set the upNext property:

  • undefined default value if not set and up next not shown
  • This is the only mandatory value to set to show up next:
{ videoId: "<videoId>" } //
  • These are the complete fields that can be set:
{
  videoId: "<videoId>",
  title: "<title>",
  caption: "<caption>",
  imageUrl: "<imageUrl>",
}

Autoplay​

Write the App() function to read the VideoMetadataMap as in the folllowing example, and set the endOfPlay properties:

"behaviour": {
    "endOfPlay": {
        "countdownToAutoplay":10000 //milliseconds, default 10000, 0 or negative means disabled
        "timeToDisableAutoplay":5400000 //milliseconds, default 0, 0 or negative means disabled
    },
},

The autoplay will start if countdownToAutoplay has set. In this case the countdown will start.

  • countdownToAutoplay will enable or disable the autoplay at the end of the milliseconds set ()
  • timeToDisableAutoplay will disable the autoplay at the end of the milliseconds set with no interactions

Working sample code (.tsx)​

import { AssetState, BoAdapterWebComponentProps, DivaWebBoAdapter, VideoMetadata } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";
import { useState } from "react";

const videoId = "<videoId>";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.11/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.4.12",
  googleIMA: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: videoId,
  libs: libs,
};

function App() {
  const [isVideoLive, setIsVideoLive] = useState(false);
  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
    videoMetadataMap: async (vd: VideoMetadata) => {
      vd.upNext = {
        videoId: "500080_minimal",
        title: "Juventus vs Inter",
        caption: "Final match of the season",
        imageUrl: "https://www.example.com/image.jpg",
      }
      return vd;
    }
  }

  return (
    <>
      <DivaWebBoAdapter {...props} />
    </>
  );
}

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for the Chain play / Up Next.