Available in Classic and VPC
The SDK supports Google IMA SDK-based pre-roll ads. Pass a VAST or VMAP tag URL to options.ads.tagUrl to automatically play an ad before the content starts.
How it works
- The SDK automatically loads the Google IMA SDK externally.
- During ad playback, the content pauses and the control bar hides.
- The content automatically resumes after ad completion, skip, or error.
Limitations
- The skip button renders inside the IMA SDK iframe, preventing external styling.
- Without ad options, the player operates identically to the existing playback flow.
Basic usage
The basic usage is as follows:
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=",
},
});
// Receiving ad events
player.on("adStart", function(e) {
console.log("Ad started");
});
player.on("adComplete", function(e) {
console.log("Ad completed");
});
player.on("adSkip", function(e) {
console.log("Ad skipped");
});
player.on("adError", function(e) {
console.log("Ad error", e.data?.message);
});
Ad events
| Event | Description |
|---|---|
adStart |
Ad playback started |
adComplete |
Ad playback completed |
adSkip |
User skipped the ad |
adError |
Ad load/playback error |
Disable ads
Set enabled to false to disable ads.
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,
}
Full HTML example
<!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 ad</title>
<!-- Load hls.js/dash.js before the VPE script -->
<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("Ad started");
});
player.on("adComplete", function(e) {
console.log("Ad completed");
});
player.on("adSkip", function(e) {
console.log("Ad skipped");
});
player.on("adError", function(e) {
console.log("Ad error", e.data?.message);
});
</script>
</body>
</html>