広告連携

Classic/VPC環境で利用できます。

Google IMA SDKベースの Pre-roll広告をサポートします。options.ads.tagUrlに VAST/VMAPタグの URLを送信すると、コンテンツの再生前に広告が自動的に再生されます。

動作方式

• Google IMA SDKは外部から自動ロードされます。
• 広告の再生中にはコンテンツが一時停止され、コントロールバーが非表示になります。
• 広告終了、スキップ、エラーの後、コンテンツが自動再生されます。

制限事項

• スキップボタンは IMA SDKの iframe内にレンダリングされるため、外部からスタイルを設定することはできません。
• 広告オプションがない場合、従来通りの再生フローと同様に動作します。

React/UMDのユースケース

"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("広告開始");
            break;
          case "adComplete":
            console.log("広告終了");
            break;
          case "adSkip":
            console.log("広告スキップ");
            break;
          case "adError":
            console.log("広告エラー", event.data?.message);
            break;
        }
      }}
    />
  );
}

広告無効化

enabled 値を falseに設定して広告を非表示にできます。

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