IMA SDK Pre-roll 연동

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

동작 방식

Google IMA SDK는 외부에서 자동 로드됩니다.
광고 재생 중 콘텐츠는 일시정지되고 컨트롤바가 숨겨집니다.
광고 완료/스킵/에러 이후 콘텐츠가 자동 재생됩니다.

제한사항

스킵 버튼은 IMA SDK iframe 내부에 렌더링되어 외부에서 스타일링할 수 없습니다.
광고 옵션이 없으면 기존 재생 흐름과 동일하게 동작합니다.

기본 사용법

const player = new ncplayer("video", {
    playlist: [
        { file: "https://CDN_DOMAIN/example.m3u8" },
    ],
    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=",
    },
});

// 광고 이벤트 수신
player.on("adStart", function(e) { console.log("광고 시작"); });
player.on("adComplete", function(e) { console.log("광고 완료"); });
player.on("adSkip", function(e) { console.log("광고 스킵"); });
player.on("adError", function(e) { console.log("광고 에러", e.data?.message); });

광고 이벤트

이벤트	설명
adStart	광고 재생 시작
adComplete	광고 재생 완료
adSkip	사용자가 광고 스킵
adError	광고 로드/재생 에러

광고 비활성화

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

전체 HTML 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPE Player - IMA 광고</title>
    <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
    <div id="video" style="max-width: 800px; margin: 0 auto;"></div>

    <script>
        const player = new ncplayer("video", {
            playlist: [
                {
                    file: "https://CDN_DOMAIN/example.m3u8",
                    poster: "https://CDN_DOMAIN/poster.jpg",
                },
            ],
            autostart: true,
            muted: true,
            ads: {
                tagUrl: "YOUR_VAST_TAG_URL",
            },
        });

        player.on("adStart", function(e) {
            console.log("광고 시작");
        });
        player.on("adComplete", function(e) {
            console.log("광고 완료");
        });
        player.on("adSkip", function(e) {
            console.log("광고 스킵");
        });
        player.on("adError", function(e) {
            console.log("광고 에러", e.data?.message);
        });
    </script>
</body>
</html>