広告キューポイントを使用した広告の表示
プレーヤーの例
以下に、動画の 2 秒マークで作成されたキューポイントに広告を表示するプレーヤーを示します。
説明ビデオ
動画再生中に広告キューポイントを使用して広告を再生する手順を案内する動画を次に示します。
実装の概要
動画内の広告キューポイントに基づいて広告を再生するには、以下の手順を実行する必要があります。
- Studio の MEDIA モジュールで、動画内の広告キューポイントを目的の時間に作成します。
- キューポイントが要求をトリガーしたときに、目的の広告を動画に配信する VAST タグを作成/取得/作成します。
- IMA3 プラグインがプレーヤーにロードされていることを確認してください。この文書では、このタスクを実行する方法を 2 つ紹介します。
- 広告キューポイントを使用するように IMA3 プラグインを設定します。
広告キューポイントを作成する
動画に広告キューポイントを追加するには、Studio の MEDIA モジュールを使用します。ビデオをクリックし、次のタスクを実行します。
- 動画のすぐ下にある [ 広告キューポイント] ボタンをクリックします。
- キューポイントをディスパッチする時間を入力します。
- [ 種類 ] を [ 広告] に設定します。
- キューポイントに名前を付けます。
キューポイントは複数追加できます。Studioでキューポイントを使用する方法の詳細については、メディアモジュールでのキューポイントの操作資料。
VAST タグを作成/取得する
IMA3 プラグインを設定するときは、VAST タグの場所への URL を指定する必要があります。VAST タグは、プレーヤーがプレイする広告を提供します。この例では、静的な VAST タグ (実際には VAST XML ドキュメントへの URL) が使用されます。広告サーバーを使用して、複数の広告をランダムに選択して、表示する広告を選択することもできます。いずれにしても、IMA3 プラグインは有効な VAST タグを指す必要があります。
このドキュメントでは、単一のアドバタイズメントを再生する静的 VAST タグが使用されます。VAST XML は次のように表示されます。
<VAST version="3.0">
<Ad id="1">
<InLine>
<AdSystem version="1.0">Test Ad Server</AdSystem>
<AdTitle>
<![CDATA[ Portals ]]>
</AdTitle>
<Description>
<![CDATA[ Demo ad number 6 ]]>
</Description>
<Error>
<![CDATA[ ]]>
</Error>
<Creatives>
<Creative>
<Linear>
<Duration>00:00:8</Duration>
<TrackingEvents/>
<AdParameters>
<![CDATA[ <xml></xml> ]]>
</AdParameters>
<VideoClicks/>
<MediaFiles>
<MediaFile type="video/mp4" width="1280" height="720" delivery="progressive" id="2" bitrate="4316" minBitrate="320" maxBitrate="320" scalable="true" maintainAspectRatio="true">
<![CDATA[
http://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-6-5seconds.mp4
]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
<Extensions>
<Extension>
<xml>data</xml>
</Extension>
</Extensions>
</InLine>
</Ad>
</VAST>
スタジオの実装
Studio を使用して広告キューポイントを設定できます。ハイレベルからは、次のことを行います。
- プレイヤーモジュールの「広告」セクションを使用して、IMA3 プラグインを設定します。
- プレイヤーを公開します。
セットアップを実行する詳細な手順は次のとおりです。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、キューポイントアドバタイズメントを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ 広告 ] をクリックします。
- [クライアントサイド(IMA)を有効にする]チェックボックスをオンにします。
- 適切な広告タグを指定します。
- 次に示すように、[ 広告をリクエスト ] ドロップダウンから [ キューポイントオン ] を選択します。
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開いているダイアログを閉じるには、[ 閉じる] をクリックします。
- MEDIA モジュールに戻り、新しく設定されたプレーヤーを使用して、広告キューポイントを含む動画を公開します。
プラグインの設定
広告キューポイントを正しく使用するには、IMA3 プラグインに対して行う必要がある設定があります。彼らは次のとおりです。
useMediaCuePoints
に設定する必要がありますtrue
requestMode
は文字列に設定する必要がありますoncue
serverUrl
有効な VAST タグに設定する必要があります
これらのオプションの詳細については、「IMA3 プラグインを使用した広告」ドキュメントの「オプション」セクションを参照してください。
インページ埋め込みの実装
ページ内埋め込みプレーヤーコードを使用して広告キューポイントを実装することもできます。以下のコードでは、IMA3 プラグインがロードされ、HTML ページで設定されます。
次のコードは実際の実装です。
- 7-12行目の:プレーヤーのサイズをスタイルします。
- 13行目:IMA3 プラグインの CSS にリンクします。
- 19-27行目は次のとおりです。JavaScript
id
で使用される属性を追加したプレーヤー公開コード。 - 29行目線:IMA3 プラグインの JavaScript を含めます。
- 32-33行目40行:プレーヤーコードが対話する準備ができるのを待ち、変数にプレーヤーオブジェクトを割り当てるための標準コード。
- 34〜38行目は次のとおりです。必要なオプションに所定の値を割り当てます。
- 39行目:
ima3
プラグインを呼び出し、オプションをパラメータとして渡します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
</style>
<link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet">
</head>
<body>
<video-js id="myPlayerID"
data-video-id="4607746980001"
data-account="1507807800001"
data-player="rkNxoBMOe"
data-embed="default"
data-application-id
class="video-js"
controls></video-js>
<script src="https://players.brightcove.net/1507807800001/rkNxoBMOe_default/index.min.js"></script>
<script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {
useMediaCuePoints: true,
requestMode: 'oncue',
serverUrl: "//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vast.xml"
};
myPlayer.ima3(options);
});
</script>
</body>
</html>
既知の問題
- Studioでキューポイントに名前を付けるときは、広告キューポイントを作成する上記のセクションでは、名前に中括弧と二重引用符を使用しないでください。そうすると、動的に生成された VMAP が正しくフォーマットされません。