diff --git a/podserving/dash_js/index.html b/podserving/dash_js/index.html
index 72a8e2b..f5ea22f 100644
--- a/podserving/dash_js/index.html
+++ b/podserving/dash_js/index.html
@@ -25,6 +25,15 @@
Pod Serving Sample (DASH streams)
API Key:
+
diff --git a/podserving/dash_js/player.js b/podserving/dash_js/player.js
index 8d92703..52156be 100644
--- a/podserving/dash_js/player.js
+++ b/podserving/dash_js/player.js
@@ -1,11 +1,15 @@
let adPlaying = false;
let dashPlayer;
let streamManager;
+let isVodStream;
+let streamId;
const streamUrl = document.getElementById('stream-manifest');
const netcode = document.getElementById('network-code');
const assetkey = document.getElementById('custom-asset-key');
const apikey = document.getElementById('api-key');
+const liveStreamButton = document.getElementById('live-stream-request');
+const vodStreamButton = document.getElementById('vod-stream-request');
const requestButton = document.getElementById('request-pod');
const adUiElement = document.getElementById('video-ad-ui');
@@ -17,25 +21,57 @@ const videoElement = document.getElementById('video');
function init() {
logText('Initializing');
+ // Clear the stream parameters when switching stream types.
+ liveStreamButton.addEventListener('click', clearStreamParameters);
+ vodStreamButton.addEventListener('click', clearStreamParameters);
+
requestButton.onclick = (e) => {
e.preventDefault();
- if (!netcode.value || !assetkey.value || !streamUrl.value) {
- logText('ERROR: Network Code, Asset Key, and Stream URL are required');
- setStatus('Error');
- return;
+ if (liveStreamButton.checked) {
+ if (!netcode.value || !assetkey.value || !streamUrl.value) {
+ logText('ERROR: Network Code, Asset Key, and Stream URL are required ' +
+ 'for livestream requests.');
+ setStatus('Error');
+ return;
+ }
+ } else {
+ if (!netcode.value) {
+ logText('ERROR: Network Code is required for VOD stream requests.');
+ setStatus('Error');
+ return;
+ }
+ }
+
+ initiateStreamManager();
+ // clear DASH.js instance, if in use.
+ dashPlayer?.destroy();
+
+ if (liveStreamButton.checked) {
+ logText('Requesting PodServing Live Stream');
+ requestPodLiveStream(netcode.value, assetkey.value, apikey.value);
+ isVodStream = false;
+ } else {
+ logText('Requesting PodServing VOD Stream');
+ requestPodVodStream(netcode.value);
+ isVodStream = true;
}
- logText('Requesting PodServing Stream');
- requestPodStream(netcode.value, assetkey.value, apikey.value);
};
}
/**
- * Request the pod stream from Google.
- * @param {string} networkCode - the network code.
- * @param {string} customAssetKey - the asset key.
- * @param {string} apiKey - the api key (optional).
+ * Clears the stream parameter input fields.
*/
-function requestPodStream(networkCode, customAssetKey, apiKey) {
+function clearStreamParameters() {
+ streamUrl.value = '';
+ netcode.value = '';
+ assetkey.value = '';
+ apikey.value = '';
+}
+
+/**
+ * Creates the IMA StreamManager and sets ad event listeners.
+ */
+function initiateStreamManager() {
// generate a stream manager, on first request
if (!streamManager) {
streamManager =
@@ -59,11 +95,15 @@ function requestPodStream(networkCode, customAssetKey, apiKey) {
],
onStreamEvent, false);
}
- // clear DASH.js instance, if in use
- if (dashPlayer) {
- dashPlayer.destroy();
- }
+}
+/**
+ * Request a pod livestream from Google.
+ * @param {string} networkCode - the network code.
+ * @param {string} customAssetKey - the asset key.
+ * @param {string} apiKey - the api key (optional).
+ */
+function requestPodLiveStream(networkCode, customAssetKey, apiKey) {
// Generate a PodServing Stream Request
const streamRequest = new google.ima.dai.api.PodStreamRequest();
streamRequest.networkCode = networkCode;
@@ -73,6 +113,17 @@ function requestPodStream(networkCode, customAssetKey, apiKey) {
streamManager.requestStream(streamRequest);
}
+/**
+ * Request a pod VOD stream from Google.
+ * @param {string} networkCode - the network code.
+ */
+function requestPodVodStream(networkCode) {
+ const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
+ streamRequest.networkCode = networkCode;
+ streamRequest.format = 'dash'; // Defaults to 'hls' if not set.
+ streamManager.requestStream(streamRequest);
+}
+
/**
* Handle stream events
* @param {!Event} e - the event object
@@ -82,10 +133,36 @@ function onStreamEvent(e) {
// Once PodServing stream is initialized, build request
// for the video stream, including the podserving stream id
case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
- const streamId = e.getStreamData().streamId;
+ streamId = e.getStreamData().streamId;
logText('Stream initialized: ' + streamId);
- const url = buildStreamURL(streamId);
- loadStream(url);
+ if (isVodStream) {
+ // For VOD streams, IMA requires a call to
+ // StreamManager.loadStreamMetadata() in response to getting the
+ // stream request URL from the video technology partner (VTP) you are
+ // using. It will be similar to this code snippet, but may vary
+ // depending on your VTP.
+ //
+ // vtpInterface.requestStreamURL({
+ // 'streamId': streamId,
+ // })
+ // .then( () => {
+ // streamManager.loadStreamMetadata();
+ // }, (error) => {
+ // // Handle the error.
+ // });
+ console.error('VOD stream error: You will need to edit the code to ' +
+ 'make a call to streamManager.loadStreamMetadata() once ' +
+ 'you get the stream URL from your VTP.');
+ } else {
+ const url = buildStreamURL(streamId);
+ loadStream(url);
+ }
+ break;
+ case google.ima.dai.api.StreamEvent.Type.LOADED:
+ if (isVodStream) {
+ const url = buildStreamURL(streamId);
+ loadStream(url);
+ }
break;
// Log Errors
case google.ima.dai.api.StreamEvent.Type.ERROR:
@@ -212,7 +289,8 @@ function processMetadata(metadataEvent) {
const timestamp = metadataEvent.event.calculatedPresentationTime;
// Use StreamManager.processMetadata() if your video player provides raw
- // ID3 tags, as with dash.js.
+ // ID3 tags, as with dash.js. Otherwise, use StreamManager.onTimedMetadata()
+ // for handling processed metadata.
streamManager.processMetadata('ID3', messageData, timestamp);
}
diff --git a/podserving/dash_js/styles.css b/podserving/dash_js/styles.css
index 5069849..f4f468d 100644
--- a/podserving/dash_js/styles.css
+++ b/podserving/dash_js/styles.css
@@ -35,6 +35,20 @@ button {
cursor: pointer;
}
+#request-type {
+ display: block;
+}
+
+#request-type label {
+ display: inline-block;
+}
+
+#request-type input {
+ display: inline-block;
+ width: auto;
+ margin-right: 30px;
+}
+
#video-container {
position: relative;
padding-bottom: 56.25%;