SSAIとの広告

概要

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

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

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

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

プレーヤーの例

この例では、VMAP ファイルで定義された IMA 広告を使用して、サーバー側の広告を動画ストリームに配信しています。プレロール、ミッドロール、ポストロール広告があるはずです。VMAP ファイルは、広告設定で定義されます。

ペンを見る18468-広告-ssai-プラグイン Brightcove Learning Services（ @ bcls1969）オンCodePen。

ソースコードを表示します。

特徴

ブライトコーブ SSAI は、Once UX 広告配信の現代的な代替品です。次のような機能があります。

より完全なVMAP/VAST 解析
VAST コンパニオン広告をフルサポート
タイムラインとリニア広告ロールを操作するための新しい API
プレイリスト、広告マクロ、FairPlay のサポート
SSAI は DRM コンテンツと DRM 以外のコンテンツの両方で動作します。
SSAI の主な役割の 1 つは、シーキングや広告に関する特定の行動を実行することです。
レガシー Once UX vMaps（UO 名前空間を使用）と新しい動的配信 vMap（bc 名前空間を使用）のデュアルサポート

はじめに

Video Cloud からサーバーサイド広告を再生するには、次の手順に従います。

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

それだこれで、Brightcove Player がサーバーサイド広告用に構成されました。必要に応じて、「SSAI をプログラム的に実装する」セクションに示すように、SSAI をプログラムで追加できます。

広告設定を作成する

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

Video Cloud Studio で、[ 管理 ] メニューを展開し、[ サーバーサイド広告設定 ] を選択します。

広告設定管理者
広告設定の情報を追加して、[ 保存 ] を選択します。

広告の設定

詳細については、「サーバーサイド広告設定の構成」を参照してください。

SSAI API を使用して広告設定を作成するには、 Video Cloud SSAI 広告設定 API ドキュメントを参照してください。

Brightcove Playerを作成する

動画クラウドスタジオを使用して、新しいBrightcove Playerを作成します。詳細については、 Video Cloud の基本:プレーヤーの作成資料。

Studioを使用したSSAIの実装

サーバーサイド広告用にプレーヤーを設定する最も簡単な方法は、Video Cloud Studio です。広告設定とプレーヤーを作成したら、次のようにSSAI用にプレーヤーを設定する準備が整いました。

を開きますプレイヤーモジュールを作成し、広告機能を追加するプレーヤーを見つけます。
プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで [ 広告 ] を選択します。
［サーバー側（SSAI）を有効にする］チェックボックスをオンにします。
[ 設定の選択] ドロップダウンメニューから、このプレーヤーに関連付ける広告設定を選択します。
広告の上にオーバーレイを表示する場合は、[ 広告情報のオーバーレイを有効にする ] チェックボックスをオンにします。これには、「詳細」と広告カウントダウンオーバーレイが含まれます。

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

プレーヤーモジュールでのSSAI広告
[ 保存] を選択します。
プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] を選択します。

広告プロパティへの変更が保存されると、SSAI プラグインはプラグイン設定の一部として設定されます。JavaScript と CSS は、広告セクションを使用して追加したため、非表示になります。

広告で動画を再生する

動的配信で取り込んだビデオクラウドから取得した動画には、VMAP ファイルに指定された広告が広告構成に含まれます。SSAI が機能するためには、ビデオにオーディオトラックが関連付けられている必要があることに注意してください。

SSAI をプログラム的に実装する

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

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

SSAI プラグインを追加する

以下のように、SSAI プラグインファイルを HTML コードに追加するか、プレーヤーの設定に追加することができます。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで [ プラグイン ] をクリックします。
[ プラグインの追加]ドロップダウンから、[ カスタムプラグイン] を選択します。
[ プラグイン名 ] に、と入力します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

このプラグインのオプションを入力する必要はありません。
[ 保存] をクリックします。
プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。

広告をプレイヤーに関連付ける

次に、広告設定をBrightcove Playerに関連付けます。これは、次の 3 つの方法のいずれかを行うことができます。

標準の埋め込みコード
高度な埋め込みコード
カタログの使用
プレーヤーの設定を更新する

標準 (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>

高度な埋め込みコード

高度な埋め込みコードで、広告設定 ID data-ad-config-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つのリクエストを行うことで動作します。

プレーヤーカタログからビデオデータをリクエストします。これには VMAP URL が含まれます。
プレーヤーソースは VMAP URL で設定され、ダイナミック配信からの VMAP ドキュメントの要求がトリガーされます。プレーヤーソースは、有効な VMAP XML ドキュメントを使用して再度設定されます。

catalogで SSAI を使用する場合は、次のように、Playback API getVideo()への呼び出しに広告設定 ID を追加します。

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);

プレーヤーの設定を更新する

広告を関連付けるもう 1 つの方法は、Brightcove Player の設定に広告設定 ID を含めることです。これを行うには、プレーヤー管理 API を次のように使用できます。

PATCHコマンドを使用して、を含めますad_config_id。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設定 ID の値と ssai プラグインに関連付けられたプラグインファイルが含まれていることを確認します。これを行うには、次の手順を実行します。
1. Studio Players モジュールでプレーヤーに移動します。プレイヤー名のリンクをクリックすると、詳細が表示されます。
2. 埋め込みコードと URL を選択します ([プレビュー] または [公開] のいずれかで機能します)。プレーヤーの URL リンクをクリックします。
3. ブラウザのアドレスバーで、 index.html を config.json に変更し、新しい URL を参照します。
プレイヤーの設定は次のようになります。
```
{
  "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
  }
}
```

広告で動画を再生する

動的配信で取り込んだ動画には、VMAP ファイルで指定された広告が広告設定に含まれます。SSAI が動作するためには、ビデオにオーディオトラックが関連付けられている必要があります。

オプション

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

スタイリング

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

クラス	使用法
`vjs-ssai`	SSAI プラグインがインスタンス化されているが、必ずしも有効であるとは限りません。これは、SSAI ソースを再生しない場合でも表示されます。
`vjs-ssai-enabled`	SSAI プラグインは現在有効になっています。言い換えれば、プレーヤーにはSSAIソースが設定されています。
`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 プラグインを使用する場合、いくつかのパブリックメソッドを使用できます。覚えておいて、あなたはまた、標準的なプレーヤー方法を使用することができます。

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

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

タイムラインのステートメソッド

*TimelineStateTimelineStateメソッドはオブジェクトを返します。タイムラインステートオブジェクトは、絶対タイムラインの任意のポイントにおける 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で行うべきではありません。この理由は、プレロードすると、プレーヤーが広告インプレッションを報告し、おそらく動画が再生される前の最初の四分位ビーコンを報告するからです。これにより、広告分析が不正確になる可能性があります。StudioでSSAIを構成すると、これは自動的に行われますが、SSAIを手動でセットアップする場合は、この問題に注意する必要があります。
ウェブプレーヤーが SSAI を使用していて、その動機の 1 つが広告ブロッカーを回避することである場合は、サーバーサイドビーコンを使用する必要があります。クライアント側のビーコンはブロックされるため使用しないでください。

用語集

このプラグインは、SSAI ストリーム内の絶対時間とコンテンツ時間の概念を区別します。従来の動画プレーヤーには、コンテンツ時間の概念しかありません。現在再生中の URI の開始から終了までの時間。SSAI ストリームは本質的にステッチされた多数のコンテンツストリームであるため、完全なステッチストリームを考慮した絶対時間の概念を導入しました。動画広告。

プロパティまたはメソッドで絶対接頭辞が表示された場合、予想/返される時間は、ステッチされたストリーム全体に対する相対値です。プレフィックスコンテンツが表示された場合、予想/返される時間は、ストリームにステッチされた特定のコンテンツ（メインコンテンツまたは単一の線形広告）にのみ相対的です。

絶対時間 :SSAI ストリームの合計タイムライン内の任意のポイントを指します。たとえば、 0:30 プリロール広告の 2:00 動画の絶対時間の合計は 2:30 です。 0:15 の絶対時刻はプリロールにあり、 0:31 の絶対時刻はコンテンツの最初の秒です。
相対時間 :現在のメディアブロック（コンテンツまたは広告）を基準とした時間を表します。上記を拡張すると、プリロール中、相対時間 0:15 は絶対時間 0:15 と同義ですが、絶対時間 0:31 は相対時間の 0:01 に相当します。

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

既知の問題

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

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

更新履歴

SSAI プラグインのリリースノートを参照してください。

過去のリリースノートについては、ここの changelog を参照してください。

ページコンテンツ

SSAIとの広告

概要

プレーヤーの例

特徴

はじめに

広告設定を作成する

Brightcove Playerを作成する

Studioを使用したSSAIの実装

広告で動画を再生する

SSAI をプログラム的に実装する

SSAI プラグインを追加する

広告をプレイヤーに関連付ける

標準 (iframe) 埋め込みコード

高度な埋め込みコード

カタログの使用

プレーヤーの設定を更新する

広告で動画を再生する

オプション

スタイリング

メソッド/プロパティ

タイムラインのステートメソッド

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

イベント

構成に関する注意事項

用語集

既知の問題

更新履歴