Ad integration

Available in Classic and VPC

The SDK supports Google IMA SDK-based pre-roll ads. Pass a VAST or VMAP tag URL to options.ads.tagUrl to automatically play an ad before the content starts.

How it works

• The SDK automatically loads the Google IMA SDK externally.
• During ad playback, the content pauses and the control bar hides.
• The content automatically resumes after ad completion, skip, or error.

Limitations

• The skip button renders inside the IMA SDK iframe, preventing external styling.
• Without ad options, the player operates identically to the existing playback flow.

React/UMD example

"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function AdPlayer() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        playlist: [
          {
            file: "https://CDN_DOMAIN/example.m3u8",
            poster: "https://CDN_DOMAIN/poster.jpg",
          },
        ],
        autostart: true,
        muted: true,
        ads: {
          tagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
        },
      }}
      onEvent={(event) => {
        switch (event.type) {
          case "adStart":
            console.log("Ad started");
            break;
          case "adComplete":
            console.log("Ad completed");
            break;
          case "adSkip":
            console.log("Ad skipped");
            break;
          case "adError":
            console.log("Ad error", event.data?.message);
            break;
        }
      }}
    />
  );
}

Disable ads

Set false to enabled to disable ads.

ads: {
  tagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
  enabled: false,
}