API

What you learn

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

The goal of this article is to build the simplest front-end to stream a video from third party video production and call API endpoints to play and pause the video.

Before starting

• Ensure the your video production you rely on is up and running.
• Set the videoId and the related setting configuration.

Instantiation

Use the BoAdapterWebComponentConfig object to get the API reference:

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

Optionally, subscribe to the onPlayerState event to track DIVA Player changes when calling the API endpoints:

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

Note: Enclose API calls within functions. E.g., to call the API endpoint play(), enclose it within a function like in the following example:

function play() {
  divaAPI.play();
}

Working sample code (.tsx)

The following working code adds to the page two buttons to play and pause the video outside the DIVA Player viewport:

// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

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: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

let divaAPI: DivaAPI

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
  }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    };
  },
  setAPI: (apiRef: DivaAPI) => {
    //track the API object
    console.log("API Reference:", apiRef);
    //get the API reference
    divaAPI = apiRef
  },
};

function play() {
  divaAPI.play();
}
function pause() {
  divaAPI.pause();
}

export const App = () => {
  return (
    <>
      <DivaWebComponent config={config} />
      <button onClick={play} >Play</button>
      <button onClick={pause} >Pause</button>
    </>
  );
};