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>