サーバーサイド広告の実装 Brightcove Player

概要

サーバーサイド広告挿入（SSAI）を使用すると、ブラウザに広告ブロッカーでブロックできないように広告を動画に埋め込むことができます。 Dynamic Delivery ストレージのフットプリントを削減し、メディアを動的にパッケージングする次世代のインジェストおよび配信システムです。

デフォルトでは、SSAIはすべての広告が視聴されるように強制し、再生中に広告カウントダウンタイマーを表示します。広告をスキップするようにこの機能を簡単にカスタマイズできます。

あなたは Brightcove Player クライアント側の広告がブロックされていない場合に広告を使用し、adblockerが検出されたときに自動的にSSAIにフェールオーバーします。この機能を有効にする方法の詳細については、広告フェイルオーバーの資料をご参照ください。

ビデオの概要については、以下を参照してください。

Player 例

この例では、VMAPファイルで定義されたIMA広告を使用して、ビデオストリームにサーバーサイド広告を配信します。プレロール、ミッドロール、ポストロール広告があることがわかります。 VMAPファイルは、広告構成で定義されています。

ペンを見る 18468-advertising-ssai-plugin by Brightcove ラーニングサービス（@bcls1969）上コードペン.

表示ソースコード.

特徴

Brightcove SSAIは、Once UX広告配信の最新の代替品です。機能は次のとおりです。

より完全なVMAP / VAST解析
VASTコンパニオン広告の完全サポート
タイムラインとリニア広告ロールと相互作用するための新しいAPI
プレイリスト、広告マクロ、FairPlayのサポート
SSAIは、DRMと非DRMの両方のコンテンツで動作します。
SSAIの主な役割の1つは、シークと広告に関する特定の動作を強制することです。
レガシーのOnce UX VMAP（uo名前空間を使用）と新しいDynamic Delivery VMAP（bc名前空間を使用）のデュアルサポート

はじめに

からのサーバーサイド広告を再生するには Video Cloud、次の手順を実行します：

広告設定を作成する
作る Brightcove Player
を使用してSSAIを実装する Studio

それでおしまい。きみの Brightcove Player サーバーサイド広告用に設定されました。必要に応じて、次のようにSSAIをプログラムで追加できます。プログラムによるSSAIの実装の項目を検索します。

広告設定を作成する

広告設定は、広告呼び出し、ビーコン、その他の設定オプションなど、SSAI再生のさまざまな側面を定義します。広告レスポンスは、VAST、VMAP、またはDFP広告ルールです。広告設定を作成するには、次の手順に従ってください。

In Video Cloud Studio、 管理人 メニューを選択し サーバーサイド広告設定.

広告設定管理者
広告設定の情報を追加して、保存.

広告設定

詳細については、サーバー側の広告設定の構成の資料をご参照ください。

SSAI APIを使用して広告構成を作成するには、 Video Cloud SSAI広告構成API の資料をご参照ください。

作る Brightcove Player

新しいを作成します Brightcove Player 使用して Video Cloud Studio。詳細については、 Video Cloud 基本：の作成 Player の資料をご参照ください。

を使用したSSAIの実装 Studio

を設定する最も簡単な方法 player サーバーサイド広告の場合は Video Cloud Studio。広告構成を作成したら、 player、それから設定する準備が整いました player SSAIの場合：

Video Cloud Studioで PLAYERS モジュールを見つけて、 player 広告機能を追加する対象。
のリンクを選択します player を開く playerのプロパティ。
次の項目を選択します： Advertising 左側のナビゲーションメニュー。
チェック サーバー側（SSAI）を有効にする チェックボックスをオンにします。
から 設定を選択 ドロップダウンメニューで、これに関連付ける広告設定を選択します player.
オーバーレイを広告に表示する場合は、 広告情報オーバーレイを有効にする チェックボックス。これには「Learn More」と広告カウントダウンオーバーレイが含まれます。

オーバーレイは、ここで有効にしてVAST広告タグで設定するまで表示されません。
完成したフォームは次のようになります。

SSAIの広告 Playersモジュール
次の項目を選択します：保存.
公開するには player選択 公開と埋め込み>変更の公開.

広告プロパティの変更が保存されると、SSAIプラグインはプラグイン設定の一部として設定されます。 JavaScriptとCSSは、あなたが Advertising の項目を検索します。

広告で動画を再生する

取得元のすべての動画 Video Cloud Dynamic Deliveryで取り込まれた広告には、広告構成にVMAPファイルで指定された広告が含まれます。 SSAIが動作するには、ビデオにオーディオトラックが関連付けられている必要があります。

プログラムによるSSAIの実装

SSAIを簡単に追加できます player 使用して Video Cloud Studio、前のセクションで示したように。これをプログラムで行う場合は、次の手順に従います。

SSAIプラグインを追加する
に広告を関連付ける player
広告で動画を再生する

SSAIプラグインを追加する

SSAIプラグインファイルをHTMLコードに追加するか、または player以下に示すの設定：

Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
リンクをクリックすると player を開く playerのプロパティ。
ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
次にクリック プラグイン XNUMXつのオプションから。
から プラグインを追加する select カスタムプラグイン.
　 プラグイン名 入力します ssai.

　 JavaScriptを URL、入力：

https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js

　 CSS URL、入力：

https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css

このプラグインのオプションを入力する必要はありません。
ナビゲーションヘッダーの保存.
公開するには player、クリック 公開と埋め込み>変更の公開.
開いているダイアログを閉じるには、 閉じる.

に広告を関連付ける player

次に、あなたの広告設定を Brightcove Player。これは、次のXNUMXつの方法のいずれかで実行できます。

標準埋め込みコード
高度な埋め込みコード
カタログの使用
あなたの更新 player の監視

標準（iframe）埋め込みコード

標準の埋め込みコードでは、 adConfigId クエリの文字列パラメータに広告の設定IDの値を設定：

<iframe src="https://players.brightcove.net/1752604059001/default_default/
index.html?videoId=5625751316001&adConfigId=your ad config id"
	allowfullscreen
	webkitallowfullscreen
	mozallowfullscreen
	width="640"
	height="360"></iframe>

高度な埋め込みコード

高度な埋め込みコードでは、 data-ad-config-id 広告の設定IDの値を持つ属性：

<video-js data-video-id="5625751316001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  data-ad-config-id="your ad config id"
  class="video-js"
  controls
  width="640"
  height="360"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

カタログの使用

あなたが使用することができます player catalog あなたのビデオに広告を関連付ける。カタログは次の2つの要求を行うことで機能します。

から動画データをリクエスト player カタログ。これにはVMAP URLが含まれます。
player ソースはVMAP URLで設定され、Dynamic DeliveryからのVMAPドキュメントのリクエストをトリガーします。の player ソースは有効なVMAP XMLドキュメントで再設定されます。

使用している場合 catalog SSAIを使用して広告設定IDを getVideo() に電話する Playback API 次のように：

var adConfigId = "your ad config id";
var myPlayer = videojs.getPlayer('myPlayerId');
// If you added the SSAI plugin using the Players module, then the initialization
// step is performed automatically. Uncomment the next line if you
// did not use the Players module.
//myPlayer.ssai();

myPlayer.catalog.getVideo("your video id", function(error, video) {
	if (error) {
		myPlayer.error(error);
	} else {
		myPlayer.catalog.load(video);
	}
}, adConfigId);

あなたの更新 player の監視

広告を関連付けるもう1つの方法は、広告の設定IDを Brightcove Player 構成。これを行うには、 Player Management API 次のように：

使用 PATCH あなたの ad_config_id。これはあなたの更新の例です player cURLを使用：

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request PATCH \
  --data '{
      "ad_config_id" : "$CONFIG_ID"
  }' \
  https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

変更を公開するには、次のようにします。

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish

あなたの設定が正しいことを確認してください Brightcove Player 含ま ad_config_id あなたのconfig idの値と関連するプラグインファイルを持つssaiプラグインに設定します。これを行うには、次の手順を実行します。
1. あなたの player Studio Playersモジュール。クリックしてください player 詳細を表示するには名前リンク。
2. 現在地に最も近い 埋め込みコードとURL （プレビューまたは公開済みのいずれかが機能します）。クリックしてください プレーヤーの URL リンクをクリックします。
3. ブラウザのアドレスバーで index.htmlを 〜へ config.json新しいURLを参照してください。
きみの player 構成は次のようになります。
```
{
  "account_id": "1752604059001",
  "ad_config_id": "d6190656-2095-4ff3-8afe-123abcde",
  "compatibility": true,
  "embed_id": "default",
  "player": {
    "template": {
      "name": "single-video-template",
      "version": "6.9.0"
    }
  },
  "player_id": "rJCECV0RZ",
  "player_name": "SSAI Player",
  "plugins": [
    {
      "name": "ssai"
    }
  ],
  "scripts": [
    "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js"
  ],
  "stylesheets": [
    "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css"
  ],
  "updated_at": "2017-11-07T16:03:47.161Z",
  "video_cloud": {
    "policy_key": "ABCDE123456789",
    "video": null
  }
}
```

広告で動画を再生する

取得元のすべての動画 Video Cloud Dynamic Deliveryで取り込まれた広告には、広告構成にVMAPファイルで指定された広告が含まれます。 SSAIが動作するには、ビデオにオーディオトラックが関連付けられている必要があります。

オプション

debug
- trueの場合、contrib-adsにデバッグメッセージを設定し、videojs-bc-analytics-loggerの存在下で追加情報を記録します。
hideOverlays
- trueの場合、カウントダウンタイマーと さらに詳しく 広告の再生中にクリックスルーオーバーレイは表示されません。
trackingBeacons
- falseの場合、広告ビュー、インプレッション、四分位数などについてVMAPから解析されたトラッキングビーコンは送信されません。
timeout
- VMAPをフェッチするXHRがタイムアウトするまでのミリ秒数。

スタイリング

に適用されるいくつかの有用なHTMLクラスがあります。 player プラグインの状態を決定するためにターゲットにできるこのプラグインによって。

CLASS	使用法
`vjs-ssai`	SSAIプラグインがインスタンス化されているが、必ずしも有効ではないことを示します。これは、SSAIソースを再生していなくても表示されます。
`vjs-ssai-enabled`	SSAIプラグインは現在有効になっています。つまり、SSAIソースが player.
`vjs-ssai-disabled`	SSAIプラグインは現在有効になっていません。
`vjs-ssai-waiting`	SSAIプラグインは、データやその他の外部プロセスを待っています。
`vjs-ssai-not-waiting`	SSAIプラグインは何も待っていません。
`vjs-ssai-hide-overlays`	`hideOverlays` オプションがに設定されています true.
`vjs-ssai-show-overlays`	`showOverlays` オプションがに設定されています true。これがデフォルトです。

メソッド/プロパティ

SSAIプラグインを使用すると、いくつかのパブリックメソッドを使用できます。標準を使用することもできます player 方法。

SSAIメソッドを使用するには、次に示すように、JavaScriptコードはプラグインがロードされるのを待つ必要があります。

<script>
	videojs.getPlayer('myPlayerID').ready(function () {
		var myPlayer = this;
		myPlayer.on("loadedmetadata", function () {
			console.log(myPlayer.ssai().currentTimelineState());
		});
	});
</script>

タイムライン状態メソッド

*TimelineState メソッドは TimelineState オブジェクトタイムライン状態オブジェクトは、絶対タイムラインの任意の時点でのSSAIストリームの再生状態を詳細に示す特定のインタフェースを持つプレーンオブジェクトです。

「絶対時間」とは、（広告とコンテンツの両方が含まれている）ストリームの完全なタイムラインにおけるポイントを指します。「相対時間」という用語は、現在のコンテンツ（広告またはコンテンツのいずれか）に対する相対時間を指します。

contentTimelineState()

引数：シングル数値 time
指定されたコンテンツ時刻にタイムライン状態を取得します （コンテンツ、広告は数えません）。たとえば、コンテンツの長さが100秒の場合、次のようにしてコンテンツの途中でタイムラインの状態を取得できます。
```
contentTimelineState(50)
```

absoluteTimelineState()

引数：シングル数値 time
指定された絶対時間におけるタイムラインの状態を取得する （コンテンツ+広告）。たとえば、コンテンツに30セカンドプレロール広告が含まれている場合、30秒のタイムラインの状態をコンテンツに含めることができます。
```
absoluteTimelineState(50)
```

これが追加のタイムライン状態メソッドのリストです。

currentTimelineState()
relativeTimelineState()
seekInAbsoluteTime()
seekInRelativeTime()
seekInContentTime()

タイムライン状態プロパティ

タイムライン状態プロパティの値を取得するには、次の構文を使用できます。

myPlayer.ssai().absoluteTimelineState().absoluteDuration;

これは、関連するプロパティのリストです。 TimelineState オブジェクト：

absoluteTime

タイプ：番号
ストリーム内の絶対時間

absoluteDuration

タイプ：番号
ストリームの絶対期間

relativeTime

タイプ：番号
現在のリニア広告またはコンテンツ自体に対するストリーム内の時間。

relativeDuration

タイプ：番号
現在のリニア広告の継続期間またはコンテンツ自体。

linearAdRoll

タイプ：LinearAdRoll
絶対時間における現在のリニア広告を表すオブジェクトです。

linearAd

タイプ：LinearAd
絶対時間における現在のリニア広告を表すオブジェクトです。

イベント

現時点では、このプラグインによって送出されたSSAI固有のイベントが1つあります。

bcov-ssai-click-through

このイベントは、プラグインによって内部的に送出され、広告のクリックスルーが要求されたことを示します。

設定ノート

SSAIで広告をプリロードすることはできません。これは、プリロードすると、 player 動画が再生される前に、広告のインプレッションとおそらく最初の四分位ビーコンを報告します。これにより、広告分析が不正確になる可能性があります。 SSAIを構成する場合 Studio、これは自動的に行われますが、SSAIを手動でセットアップした場合は、この問題に注意する必要があります。
ウェブなら player はSSAIを使用しており、そのための動機のXNUMXつは広告ブロッカーを回避することです。サーバー側のビーコンを使用する必要があります。クライアント側のビーコンはブロックされるため、使用しないでください。

用語解説

このプラグインは、 絶対の と コンテンツ SSAIストリーム内の時間。従来のビデオ playersの概念のみ コンテンツ 時間; 現在再生しているURIの開始から終了までの時間 SSAIストリームは基本的に コンテンツ 私たちはコンセプトを導入しました 絶対の ビデオ広告を含む完全なステッチングされたストリームを考慮に入れた時間。

接頭辞が表示されたら 絶対の プロパティまたはメソッドでは、予想される/返される時間は、ステッチされたストリーム全体に対するものです。接頭辞が表示されたら コンテンツ期待される/返される時間は、ストリームに縫い付けられた特定のコンテンツ（メインコンテンツまたはシングルリニア広告）に対してのみ相対的です。

絶対時間 ：SSAIストリームの全タイムラインの任意のポイントを参照します。たとえば、a 2：00 ビデオを 0：30 プレロール広告の総絶対時間は 2：30。絶対時間 0：15 プレロールにあり、絶対時間は 0：31 コンテンツの最初の秒です。
相対時間 ：コンテンツまたは広告のいずれかのメディアの現在のブロックに関連する時間を参照します。上記を展開すると、プレロール中に、相対時間 0：15 絶対時間と同義である 0：15、絶対時間 0：31 の相対的な時間と等しくなります 0：01.

一般的に、相対時間は、 player UIと、このプラグインおよび関連するミドルウェアの仕事の多くは、絶対時間から相対時間に変換されます。
コンテンツタイム SSAIストリームのコンテンツタイムライン内の特定の時点を指します。すべての広告は無視されます。たとえば、2：00プレロール広告のある0：30動画のコンテンツ時間は2：00です。 0：15のコンテンツ時間は、0：45の絶対時間（プリロールと15秒の合計）に相当します。

既知の問題点

SSAIプラグインの使用に関する既知の問題は次のとおりです。

Safari 10 / 11は、ビデオの最後にポストロールの最後のフレームを表示することがあります。
SSAIはオーバーレイ広告をビデオストリームにステッチしません。

変更履歴

見ます変更履歴はこちら.

ページ内容

サーバーサイド広告の実装 Brightcove Player

概要

Player 例

特徴

はじめに

広告設定を作成する

作る Brightcove Player

を使用したSSAIの実装 Studio

広告で動画を再生する

プログラムによるSSAIの実装

SSAIプラグインを追加する

に広告を関連付ける player

標準（iframe）埋め込みコード

高度な埋め込みコード

カタログの使用

あなたの更新 player の監視

広告で動画を再生する

オプション

スタイリング

メソッド/プロパティ

タイムライン状態メソッド

タイムライン状態プロパティ

イベント

設定ノート

用語解説

既知の問題点

変更履歴