Resume Point API

What you learn

You are instantiating DIVA Player in your Web application 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 and how to work with Resume Point API.

Resume Point API will notify the subscriber about a change and also allow the integrator to query the current status Diva Player.

Before starting

• Ask your video engineers team the <video id> and <settings URL>.

Technical Details

Resume Point API helps integrator to get updates of: Player Position, Video Metadata and Player State

1. Player Position - value triggered constantly while video is playing. Check the getPlayerPosition method in the Video API section for more details.

2. Video Metadata - Exposes the VideoMetadata received by Diva via VideoMetaDataProvider. From here integrator can know which video is being player, video id may be used to identify the current video being played. It is important because Diva can internally change the video being played, for instance thought video list or end of play.
   Check the getVideoMetadata method in the Video API section for more details.

3. Player State - The current player state should inform the current player state. At a minimum, it should contain playing and pause. The integrator may save the resume point when the user pauses the video.
   Check the getPlayerState method in the Video API section for more details.

Instantiation

Use the BoAdapterWebComponentConfig object to get the API reference:

const config: BoAdapterWebComponentConfig = {
  ...
  setAPI: (apiRef: DivaAPI) => {
    //track the API object
    console.log("API Reference:", apiRef);
    //get the API reference
    divaAPI = apiRef
  },
  ...
};

How to get updates of the Player Position

1. Subscribe to the onPlayerPosition event to track DIVA Player position changes when calling the API endpoints:

const config: BoAdapterWebComponentConfig = {
  ...
  onPlayerPosition: (position: {relativePosition,absolutePosition}) => {
    //track the player position changes when calling API's endpoints
    console.log("Player Position:", position);
  }
};

2. In observer get player position updates:

    const status = divaAPI?.getPlayerPosition(videoId?: string);

How to get updates of the Video Metadata

1. Subscribe to the OnVideoMetadataChanges event to track VideoMetadata changes when calling the API endpoints:

const config: BoAdapterWebComponentConfig = {
  ...
  onVideoMetadataChanges: (videoMetadata) => {
    //track the videoMetadata changes when calling API's endpoints
    console.log("Video metadata:", videoMetadata);
  }
};

2. In observer get video metadata updates:

    const status = divaAPI?.getVideoMetadata(videoId?: string);

How to get updates of the Player State

1. Subscribe to the onPlayerState event to track DIVA Player state changes when calling the API endpoints:

const config: BoAdapterWebComponentConfig = {
  ...
  onPlayerState: (state: PlayerState) => {
    //track the player state changes when calling API's endpoints
    console.log("Player State:", state);
  }
};

2. In observer get player state updates:

    const status = divaAPI?.getPlayerState(videoId?: string);

Working sample code (.brs)

// BO Adapter SDK
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoId = "<videoId>";

let divaAPI: DivaAPI

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.11.2/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,
    setAPI: (api) => {
      // Here you can save a reference to DIVA APIs
      divaAPI = api;
    },
    onPlayerState: (state: PlayerState) => {
      console.log("Player State:", state);
    },
    onPlayerPosition: (position: { relativePosition: number; absolutePosition: Date }) => {
      console.log("Player Position:", position);
    },
    onVideoMetadataChanges: (videoMetadata: VideoMetadataClean) => {
      console.log("Video Metadata:", videoMetadata);
    }
};

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

export const App = () => {
    return <DivaWebBoAdapter { ...props } />;
};