IMA SDK Pre-roll 연동

Google IMA SDK 기반의 Pre-roll 광고를 지원합니다. options.ads.tagUrl에 VAST/VMAP 태그 URL을 전달하면 콘텐츠 재생 전에 광고가 자동으로 재생됩니다.

테스트 플레이어

아래 플레이어는 Pre-roll 광고가 연동된 샘플입니다. 실제 서비스에서는 accessKey와 광고 태그 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,
}