Skip to main content

StreamLayer Integration

What you learn​

This article is intended for front-end developers integrating DIVA Player with DIVA Back Office as the video streaming source. By the end of this article, DIVA Player will display StreamLayer advertisement overlays (such as pause ads) alongside your video on Web and WebTV, sourced from per-video VAST URLs.

note

StreamLayer is a third-party interactive overlay SDK that displays contextual advertisements and interactive content alongside video playback. When integrated with DIVA Player, StreamLayer renders pause ads (for example, when the viewer pauses the video), using a per-video VAST URL to source ad creatives.

Before starting​

  • Your video setup is working and you have a <videoId> and basic instantiation code for your platform.
  • You have a StreamLayer SDK key. Contact your StreamLayer account manager to obtain one.
  • For each video, you have a StreamLayer event ID and a VAST URL. Obtain these values from your video engineering team.
  • Configure StreamLayer in your Settings (typically loaded from DIVA Back Office via your <settings URL>):

Integration steps​

Step 1 — Configure setting.streamLayerSetting​

Configure setting.streamLayerSetting in your player settings so the SDK key and StreamLayer options are available at runtime.

See setting.streamLayerSetting for the complete setting schema and defaults.

Step 2 — Add streamLayer in videoMetadataMap​

In your videoMetadataMap callback, set the streamLayer field on the VideoMetadata object returned from Back Office.

See VideoMetadata.streamLayer for the full metadata definition.

Full code samples​

Write the Basic instantiation code. Extend it with videoMetadataMap as below.

import {
  BoAdapterWebComponentProps,
  DivaWebBoAdapter,
  VideoMetadata,
} from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoId = "<videoId>";

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,
  libs,
};

// Example content in your settings JSON (loaded from settingsUrl):
// "settings": {
//   "streamLayerSetting": {
//     "sdkKey": "YOUR_STREAMLAYER_SDK_KEY",
//     "isEnable": true,
//     "showingDelay": 0
//   }
// }

function App() {
  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config,
    videoMetadataMap: async (vd: VideoMetadata) => {
      vd.streamLayer = {
        eventID: "YOUR_EVENT_ID_HERE",
      };
      return vd;
    },
  };

  return <DivaWebBoAdapter {...props} />;
}

export default App;

Reference​

See StreamLayer References for the complete API surface, including:

  • Player configuration and metadata fields — streamLayerSetting and streamLayer values used by the built-in StreamLayer integration.
  • TypeScript interfaces — the StreamLayerSetting interface and the streamLayer metadata shape.