End of play

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 lists of recommended other videos.

Before starting

• Set up the development environment.
• Ensure the DIVA Back Office instance you rely on is up and running.
• Ask your video engineers team the <video id> and the related <settings URL>.
• Ensure the VideoMetadata contains the video lists with videos to recommend at the end of the video.

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.

How to overwrite the end of play behavior

Write the App() function to read the VideoMetadata as in the following example, and set the autoEoPTime property:

• 0 to set no autoplay
• a positive integer to set the milliseconds DIVA Players waits before auto-playing the first video of the first video list in the VideoMetatdata.

  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.behavior.autoEoPTime = 0; //0 means no autoplay, while any other positive integer is how many milliseconds DIVA Player waits before auto-playing the first video of the first video list
        return vd;
      }
    }
  
    return (
      <>
       <DivaWebBoAdapter {...props} />
      </>
    );
  } 

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.8.5/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  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.behavior.autoEoPTime = 0; //0 means no autoplay, while any other positive integer is how many milliseconds DIVA Player waits before auto-playing the first video of the first video list
      return vd;
    }
  }

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