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.:
- RW
- WebTV
// 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>}
</>
);
};
// DIVA Standalone SDK
import { DivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type {
DivaWebTVInitType,
DivaWebTVProps,
VideoMetadata,
VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";
const init: DivaWebTVInitType = {
setting: {
general: {
culture: "en-GB",
}
},
videoId: "<video id>"
};
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',
};
const props: DivaWebTVProps = {
init,
libs,
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);
props.onVideoMetadataChanges = (videoMetadata: VideoMetadataClean) => {
if (videoMetadata.assetState === "live") {
setIsVideoLive(true);
}
else {
setIsVideoLive(false);
}
};
return (
<>
<DivaWebTV {...props} />
{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>}
</>
);
}