広告キューポイントを使用した広告表示

このドキュメントでは、IMA3 プラグインと広告キューポイントを使用して広告を表示する方法について説明します。

プレーヤーの例

以下は、動画の 2 秒地点に作成したキューポイントで広告を表示するプレーヤーの例です。

説明動画

以下は、動画再生中に広告を再生するための広告キューポイントの使用手順を解説する説明動画です。

実装の概要

動画内の広告キューポイントに基づいて広告を再生するには、次の作業を行います。

Studio の MEDIA モジュールで、動画内の任意のタイミングに広告キューポイントを作成します。
キューポイントによってリクエストがトリガーされた際に、目的の広告を動画に配信する VAST タグを用意／作成します。
IMA3 プラグインがプレーヤーに読み込まれていることを確認します。本ドキュメントでは、この設定を行う 2 つの方法を紹介します。
広告キューポイントを使用するように IMA3 プラグインを設定します。

広告キューポイントの作成

動画に広告キューポイントを追加するには、Studio の MEDIA モジュールを使用します。対象の動画をクリックし、次の手順を実行します。

動画のすぐ下にある キューポイントの追加 ボタンをクリックします。
キューポイントを発火させたい時刻を入力します。
タイプ を広告に設定します。
キューポイントに名前を付けます。

複数のキューポイントを追加することもできます。Studio でのキューポイントの使用方法の詳細は、Media モジュールでのキューポイントの使用ドキュメントを参照してください。

VAST タグの作成／取得

IMA3 プラグインを設定する際は、VAST タグが配置されている場所の URL を指定する必要があります。VAST タグは、プレーヤーが再生する広告を配信するためのものです。この例では、静的な VAST タグ（実際には VAST XML ドキュメントへの URL）を使用します。複数の広告の中からランダムに配信するために、広告サーバーを利用することもできます。いずれの場合も、IMA3 プラグインは有効な VAST タグを参照している必要があります。

本ドキュメントでは、1 件の広告を再生する静的な 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 による実装

Studio を使用して広告キューポイントを設定できます。大まかな流れは次のとおりです。

PLAYERS モジュールの広告セクションで IMA3 プラグインを設定します。
プレーヤーを公開します。

具体的な設定手順は次のとおりです。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、キューポイント広告を追加したい既存のプレーヤーを探します。
対象のプレーヤー名のリンクをクリックし、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューで広告をクリックします。
クライアントサイド（IMA）の有効化 チェックボックスをオンにします。
適切な Ad Tag を入力します。
広告の要求 ドロップダウンから キューポイントで を選択します（下図参照）。
保存をクリックします。
プレーヤーを公開するには、公開をクリックします。
開いているダイアログを閉じるには、閉じる をクリックします。
MEDIA モジュールに戻り、新しく設定したプレーヤーを使用して、広告キューポイントを含む動画を公開します。

プラグイン設定

広告キューポイントを正しく利用するには、IMA3 プラグインで次の設定を行う必要があります。

useMediaCuePoints は true に設定する必要があります。
requestMode は文字列 oncue に設定する必要があります。
serverUrl は有効な VAST タグに設定する必要があります。

これらのオプションの詳細については、IMA3 プラグインを使用した広告設定ドキュメントの オプション セクションを参照してください。

Videoタグ埋め込みによる実装

Videoタグ埋め込み用のプレーヤーコードを使用して、広告キューポイントを実装することもできます。以下のコードでは、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/4/videojs-ima3.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=""
           controls=""></video-js>
        <script src="https://players.brightcove.net/1507807800001/rkNxoBMOe_default/index.min.js"></script>
      
        <script src="https://players.brightcove.net/videojs-ima3/4/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>

注意事項

キューポイントのキー／値のペアが置き換えられるのは、プレーヤーの 広告リクエスト 設定が キューポイントで に設定されている場合のみです。特に mediainfo.ad_keys を使用する際に重要です。
mediainfo.customFields の変数名では、大文字と小文字が区別されます。

既知の問題

上記の 広告キューポイントの作成 セクションで説明したように、Studio でキューポイントに名前を付ける際は、名前に波かっこや二重引用符を使用しないでください。使用すると、動的に生成される VMAP の形式が不正になってしまいます。