Skip to main content

Live-to-VOD transition

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 manage the video transition from live to VOD.

Before starting​

  • Ensure the your video production you rely on is up and running.
  • Set the videoId and the related setting configuration.
  • Ensure the VideoMetadata contains the asset state, which is what your front-end reads to get whether the video is either live or VOD.

Instantiation​

Write the Basic instantiation code, then add the code to read the assetState uding onVideoMetadataChanges callback.:

// 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',
};

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>",
      "assetState": "live",
    }
  },
};

export const App = () => {
  const [isVideoLive, setIsVideoLive] = useState(false);

  config.onVideoMetadataChanges = (videoMetadata: VideoMetadataClean) => {
    if (videoMetadata.assetState === "live") {
      setIsVideoLive(true);
    }
    else {
      setIsVideoLive(false);
    }
  };

  return (
    <>
      <DivaWebComponent config={config} />
      {isVideoLive && <div>This is what to render when the video is live</div>}
      {!isVideoLive && <div>This is what to render when the video is VOD</div>}
    </>
  );
};