광고 연동

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