Classic/VPC 환경에서 이용 가능합니다.
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>
<!-- hls.js / dash.js를 VPE 스크립트보다 먼저 로드 -->
<script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
<script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
<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>