概要
このプラグインは、Brightcove Playerで HTML5 の FreeWheel 広告技術を有効にします。
プラグインのバージョンを使用する
FreeWheel プラグインを使用する場合は、バージョン管理された URL を使用する必要があります。
バージョン | タイプ | バージョン管理された URL |
---|---|---|
最新リリース | JS | https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js |
CSS | https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css |
参考までに、プラグインのバージョンは「プラグインバージョンリファレンス」ドキュメントで追跡されています。
広告サーバーをテストする
最初に行うべきことは、使用する予定の広告タグの有効性を検証することです。URL をコピーしたことを確認し、次のページを参照します。広告プレビューアー(このリンクをクリックすると、ページが新しいウィンドウまたはタブで開きます)。
指定されたフォーム入力フィールドに広告タグのURLを貼り付けます。[ 広告プレビューアーで開く] をクリックします。[ 広告プレビューアーで開く]というタイトルのポップアップが表示され、[ 開く]ボタンをクリックして広告をテストします。[ 再生] をクリックすると、正常に機能している場合、広告に動画が散在して表示されます。このテスト環境で広告タグが機能しない場合は、Brightcove Player では機能しません。
正しいSDKURLを使用する
次の2つのセクションでは、FreeWheelを実装する代わりの方法を提供します。どちらのセクションでも、を使用しますsdkurl
。以前は、単にオプションの値にを使用しhttp://adm.fwmrm.net/p/[]/AdManager.js
、FreeWheel SDK の最新バージョンを指していることを知っていました。今、あなたは、のような特定のバージョンを指すURLを入力する必要がありますhttps://mssl.fwmrm.net/libs/adm/6.24.0/AdManager.js
。さらに、初期セットアップ後に、最新バージョンを使用したい場合は、FreeWheel から新しいバージョンの SDK がリリースされたときにも、その値を更新する必要があります。この変更を行った後は、Brightcove Player を再公開する必要があります。
URL を更新せず、自動アップグレード URL を引き続き使用すると、バージョン 6.23 は永久に指定されます。
Brightcove Player インテグレーションでは、独自の SDK バージョンを管理することができます。これには、Html5.sdkurl
オプションを FreeWheel プラグインに渡すことが含まれます。
player.FreeWheelPlugin({
Html5: {
sdkurl: 'preferred-sdk-url'
}
});
プレーヤーモジュールを使用して実装する
Players モジュールを使用して FreeWheel プラグインを実装するには、次の手順に従います。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- [ プラグインの追加 ] ドロップダウンから、[ カスタムプラグイン ] を選択します。
- [ プラグイン名 ] に、と入力します
FreeWheelPlugin
。 - JavaScript の URL には、次のように入力します。
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js
- CSS の URL には、次のように入力します。
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css
- [ オプション (JSON)] テキストボックスに構成オプションを入力します。フォームで提供されるオプションは、FreeWheel
Flash
Html5
によって提供される再生技術および設定セクションを設定します。(セキュリティ上の理由から)少し変更された、完全な構成を以下に示します。スタブの例を次に示します。{ "Html5": { "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...", "serverUrl": "http://cue.v.fwmrm.net/..." "profile": "3aaa_profile", ... } }
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
コードを使用して実装する
プラグインを実装するには、プラグインコードの場所、必要に応じてスタイルシート、プラグイン名、プラグイン設定オプションを知る必要があります。プラグインコードとスタイルシートの場所は次のとおりです。
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css
プラグインの名前はですFreeWheelPlugin
。オプションは、FreeWheel Flash
Html5
が提供する再生技術および設定セクションを設定します。セキュリティ上の理由から、少し変更された、完全な設定を以下に示します。スタブの例を次に示します。
{
Html5: {
sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
serverUrl: "http://cue.v.fwmrm.net/..."
profile: "3aaa_profile",
...
}
以下は、プレーヤーのページ内埋め込み実装を使用して、FreeWheelプラグインをプレーヤーの単一インスタンスに関連付けることを示しています。
- 90行目です:
link
タグを使用して、HTMLhead
ページのにプラグインの CSS を含めます。 - 92行目:
video
id
タグに何らかの値を持つ属性を与えます。この場合は myPlayerID。 - 100行目:
script
タグを使用して、プラグインの JavaScript をbody
HTML ページのに含めます。 - 105~125行目線:プラグインを初期化し、カスタムオプションを渡します。
- 107行目:プレイヤーへの参照を作成します。
<link href="https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css" rel="stylesheet">
<video-js id="myPlayerID"
data-account="3676484086001"
data-player="8fb8f3c6-5b2b-471f-953c-56d65267ff11"
data-embed="default"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/3676484086001/8fb8f3c6-5b2b-471f-953c-56d65267ff11_default/index.min.js"></script>
<script src="https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js"></script>
<script>
var myPlayer;
videojs.getPlayer('myPlayerID').ready(function() {
// get a reference to the player
myPlayer = this;
// initialize the FreeWheel plugin
myPlayer.FreeWheelPlugin({
Html5: {
sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
serverUrl: "http://cue.v.fwmrm.net/..."
profile: "3aaa_profile",
...
}
});
});
</script>
構成
FreeWheelプラグインの構成には、次の設定が使用されます。
- adtechOrder :
- タイプ:
Array
デフォルト値:["html5"]
- 配列には、優先順位の高い順に、使用を試みる広告統合テクノロジーが含まれています。
- タイプ:
- フラッシュ :
- タイプ:
Object
- 技術固有の FreeWheel 設定のオブジェクト (FreeWheel によって提供)。オブジェクトには、次のオプションがあります。
- swfurl :
- タイプ:
string
デフォルト値:https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf
(FWフラッシュSDK v6.4.6と互換性あり) - オプションの値は、FreeWheelFlashプラグインのバージョンに基づいて使用できます。これらの値は、プラグインのバージョンを使用するこのドキュメントの上部にあるセクション。
Flash
オブジェクトの子プロパティである必要があります。Flash 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- 自動再生 :
- タイプ:
boolean
Default Value:true
- コンテンツが自動再生されているかどうかを示します。
Flash
オブジェクトの子プロパティである必要があります。Flash 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- 無出席プレイ :
- タイプ:
boolean
Default Value:false
autoPlay
が true に設定されている場合、unattendedPlay
ユーザーが自動再生を認識しているかどうかを示します。Flash
オブジェクトの子プロパティである必要があります。Flash 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- 訪問者 CustomID :
- タイプ:
string
デフォルト値:unset
- サイト運営者が広告リクエストのカスタムビジターIDを渡すことを許可します。設定すると、この値は customid= "customid_001"としてリクエストペイロードのビジターブロックに渡されます。ID は、オープニングビジータータグの広告リクエストに対するレスポンスで、属性 customid= "customid_001" として返されます。
Flash
オブジェクトの子プロパティである必要があります。Flash 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- タイプ:
- Html5 :
- タイプ:
Object
- 技術固有の FreeWheel 設定のオブジェクト (FreeWheel によって提供)。オブジェクトには、次のオプションがあります。
- 自動再生タイプ :
- タイプ:
integer
デフォルト値:1
- コンテンツビデオが自動再生され、ユーザーはコンテンツが自動再生されていることを認識していることを示します。
- autoPlayTypeに渡される値は、FreeWheel広告サーバーに送信される広告リクエストURLにフラグを設定し、関連するFreeWheelSDK定数と同等の3つの整数値のいずれかになります。
- 1: tv.freewheel.sdk.Video_asset_auto_play_type_attendedn :
autoPlay
手段は真実であり、unattendedPlay
偽である。これはフラグ = +play-uapl を設定します。 - 2: tv.freewheel.sdk.Video_asset_auto_play_type_unattended :
autoPlay
意味は真でありunattendedPlay
も事実である。これはフラグ = +プレイ+UAPL を設定します。 - 3: tv.freewheel.sdk.Video_asset_auto_play_type_none :
autoPlay
意味は偽でありunattendedPlay
は設定されていません。これは flag = -play を設定します。
- 1: tv.freewheel.sdk.Video_asset_auto_play_type_attendedn :
Html5
オブジェクトの子プロパティである必要があります。Html5 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- 訪問者 CustomID :
- タイプ:
string
デフォルト値:(optional)
- ザ・
visitorCustomId
オプションを使用すると、サイト運営者は広告リクエストのカスタムビジターIDを渡すことができます。設定すると、この値はクエリストリング vcid=customid_001 として広告リクエスト URLに渡されます。ID は、訪問者 JSON ブロック内の広告リクエストに応じて「customID」として返されます。「customid_001"。 Html5
オブジェクトの子プロパティである必要があります。Html5 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- subsessionToken :
- タイプ:
int
デフォルト値:(optional)
subsessionToken
このオプションを使用すると、パブリッシャーは指定されたトークンでサブセッションを開始できます。設定すると、この値は queryString として広告リクエストの URL に渡されます。ssto=1234567890
Html5
オブジェクトの子プロパティである必要があります。Html5 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- 互換性のある寸法 :
- タイプ:
array
デフォルト値:(optional)
-
compatibleDimensions
このオプションを使用すると、パブリッシャーは互換性のあるディメンションの配列を渡すことができます。例:compatibleDimensions: [ {width: A, height: B}, {width: X, height: Y} ]
設定すると、この値は queryString として広告リクエストの URL に渡されます。
cd=widthA,heightA|widthX,heightY
Html5
オブジェクトの子プロパティである必要があります。Html5 広告技術が使用されている場合、これはオブジェクト要素に直接適用されます。
- タイプ:
- タイプ:
- LoadWitHクッキー :
- タイプ:
boolean
Default Value:false
- VASTリクエストのCookieを有効または無効にします。
- タイプ:
- リクエストアドモード :
- タイプ:
string
Default Value:onload
- プロパティに指定できる値は次のとおりです。
onload
:広告は、プレーヤーが完全にロードされたときに要求されます。onplay
:広告は、ユーザーが開始または自動再生のいずれかで動画の再生を開始したときに要求されます。oncue
:広告は、キューポイントの開始時刻にリクエストされます。このプロパティを使用するときは、次の点も注意してください。useMediaCuePoints
プロパティもに設定されている場合にのみ機能しますtrue
。- Video Cloud 広告のキューポイントは、コンテンツ動画に設定する必要があります。を参照してくださいメディアモジュールでのキューポイントの操作コンテンツビデオでキューポイントを作成する方法については、ドキュメントを参照してください。
- ある場合
temporalSlots
下のオプションFlash
またはHtml5
プロパティの場合、設定は無視されます。
- タイプ:
- MediacuePoints を使用する :
- タイプ:
boolean
Default Value:false
- Video Cloud 広告のキューポイントを使用して広告をトリガーするには、true に設定する必要があります。
requestAdsMode: 'oncue'
プロパティと割り当てられた値と組み合わせて使用する必要があります。
- タイプ:
広告マクロ
FreeWheel の設定時にジョブを簡単にするために利用できる広告マクロがあります。広告マクロは、設定内の任意の場所で対応する値に置き換えられます。
次に、置換された値が使用される変数の完全なリストを示します。
マクロ | 説明 |
---|---|
{player.id} | プレーヤーID |
{mediainfo.id} | 動画ID |
{mediainfo.name} | ビデオタイトル |
{mediainfo.description} | 短い説明 (最大 250 文字) |
{mediainfo.tags} | 動画に関連付けられたタグ(メタデータ) |
{mediainfo.reference_id} | 参照 ID |
{mediainfo.duration} | Video Cloud によって報告された動画の再生時間 |
{mediainfo.ad_keys} | Studioの Media モジュールで追加および編集できる自由形式のテキスト文字列。クエリパラメータは、
|
{player.duration} | プレーヤーによって測定されたビデオの再生時間(mediainfo.duration おそらくと若干異なる場合があり、おそらくより正確です) |
{document.referrer} | 参照ページ URL |
{window.location.href} | 現在のページ URL |
{player.url} | プレーヤーのURL |
{timestamp} | 1/1/70以降の現在の現地時間(ミリ秒) |
{random} | 乱数0-1兆 |
設定例
"plugins": [{
"name": "FreeWheelPlugin",
"options": {
"Html5": {
"keyValues": [{
"feature": "simpleAds",
"module": "DemoPlayer"
}, {
"feature": "trackingURLs"
}],
"networkId": 99999,
"profile": "global-js",
"sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
"serverUrl": "http://cue.v.fwmrm.net/ad/h/5",
"siteSectionCustomId": "your value here",
"temporalSlots": [{
"adUnit": "preroll",
"id": "Preroll_1",
"timePosition": 0
}, {
"adUnit": "postroll",
"id": "Postroll_1",
"timePosition": 60
}, {
"adUnit": "overlay",
"id": "Overlay_1",
"timePosition": 5
}],
"videoAssetCustomId": "your value here",
"videoAssetDuration": 500
},
"debug": true,
"prerollTimeout": 1000,
"timeout": 5000
}
}]
イベント
プラグインは、ロード、初期化、および再生中にいくつかのカスタムイベントタイプを放出します。広告フレームワークのイベントは、他のイベントと同様にリッスンできます。
player.on('ads-ad-started', function(event) {
console.log('event', event);
});
イベント | 次の場合に送出されます。 |
---|---|
ads-request | リクエストに応じて、広告データ。 |
ads-load | 広告リクエストの後に広告データが利用可能になったとき。 |
ads-ad-started | 広告の再生が開始されました。 |
ads-ad-ended | 広告の再生が終了しました。 |
ads-pause | 広告が一時停止されます。 |
ads-play | 一時停止から広告が再開されます。 |
ads-first-quartile | 広告は合計期間の 25% を再生しました。 |
ads-midpoint | 広告は合計期間の 50% を再生しました。 |
ads-third-quartile | 広告は合計期間の 75% を演奏しました。 |
ads-click | 視聴者が再生中の広告をクリックした。 |
ads-volumechange | 再生中の広告のボリュームが変更されました。 |
ads-pod-started | リニア広告ポッド(シーケンスされた広告のグループ)の最初の広告が開始されました。 |
ads-pod-ended | リニア広告ポッド(シーケンシングされた広告のグループ)の最後の広告が終了しました。 |
ads-allpods-completed | すべてのリニア広告の再生が終了しました。 |
fw-before-ad-Request | このイベントはプレーヤーオブジェクト上に公開され、広告リクエストを送信する前にトリガーされます。通常、これはプレイリストのコンテキストで使用され、FreeWheel 設定を更新するには: player.FreeWheelPlugin.settings.Html5 またはplayer.FreeWheelPlugin.settings.Flash |
動的サーバーの URL の割り当て
fw-before-ad-request
このイベントを使用して、サーバー URL を動的に割り当てることができます。on()
メソッドを使用して広告リクエストをリッスンし、目的のサーバー URL を割り当てます。もちろん、コード内のプレースホルダに必要なサーバー URL を指定する必要があります。
player.on('fw-before-ad-request', function () {
player.FreeWheelPlugin.settings.Html5.serverUrl = '[your server url]'
player.FreeWheelPlugin.settings.Flash.serverUrl = '[your server url]'
})
サーバの URL を以前に設定した場合、表示されるコードは以前の設定よりも優先されます。
デモ
このデモでは、プリロール、5秒でミッドロール、ポストロールを再生します。adTechOrder
は、次に示すように、html5
最初に設定されています。
"adTechOrder": [
"html5",
"flash"
],
アドテック注文:html5、フラッシュ
このデモでは、html5
の最初のを使用しますadtechOder
。
以下は、プレーヤーで使用される実際の構成です。これは Studio のオプション値に使用できることに注意してください。
{
"Flash": {
"networkId": 90750,
"profile": "3pqa_profile",
"sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
"serverUrl": "//cue.v.fwmrm.net/ad/g/1",
"siteSectionCustomId": "your value here",
"swfurl": "https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf",
"temporalSlots": [{
"adUnit": "preroll",
"id": "Preroll_1",
"timePosition": 0
}, {
"adUnit": "postroll",
"id": "Postroll_1",
"timePosition": 60
}, {
"adUnit": "midroll",
"id": "Midroll_1",
"timePosition": 5
}],
"videoAssetCustomId": "your value here",
"videoAssetDuration": 500
},
"Html5": {
"keyValues": [{
"feature": "simpleAds",
"module": "DemoPlayer"
}, {
"feature": "trackingURLs"
}],
"networkId": 96749,
"profile": "global-js",
"sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
"serverUrl": "//demo.v.fwmrm.net/ad/g/1",
"siteSectionCustomId": "your value here",
"temporalSlots": [{
"adUnit": "preroll",
"id": "Preroll_1",
"timePosition": 0
}, {
"adUnit": "postroll",
"id": "Postroll_1",
"timePosition": 60
}, {
"adUnit": "midroll",
"id": "Midroll_1",
"timePosition": 5
}],
"videoAssetCustomId": "your value here",
"videoAssetDuration": 500
},
"adTechOrder": [
"html5",
"flash"
],
"debug": true,
"prerollTimeout": 1000,
"timeout": 5000
}
プレイリスト
このデモでは、HTML の最初の構成をプレイリストで使用します。プレイリストのビデオごとに、プリロール、5秒マークのミッドロール、ポストロールが表示されます。
プレーヤー広告ライブラリ
videojs/videojs-contrib-ads GitHub リポジトリには、Brightcove Player と連携する動画広告ライブラリに必要な共通機能を提供するプラグインが含まれています。このプラグインは、動画広告の統合に必要な共通機能を提供し、広告インテグレーターにとって多くの懸念事項を処理し、広告統合のために記述する必要があるコードを削減します。
プロパティ
videojs-contrib-adsは、役立ついくつかのプロパティを提供します。非対応形式:
名前 | データタイプ | 説明 |
---|---|---|
ads.ad.id | ストリング | 再生される広告の一意の識別子 |
ads.ad.index | [番号] | 指定された時刻に再生される広告のインデックス。このインデックスは、広告ポッド内の広告の序数を識別します。 |
ads.ad.duration | [番号] | 広告の継続時間 (秒) |
ads.ad.type | 文字列 | プリロール、 MIDROLL、またはPOSTROLLのどちらか |
ads.ad.currentTime() | 関数 | 広告再生の現在の時刻を返す関数 |
次のコードは、プロパティの使用方法を示しています。
myPlayer.on('ads-ad-started',function( evt ){
console.log('*****ads-ad-started event passed to event handler', evt);
console.log('myPlayer.ads.ad.id',myPlayer.ads.ad.id);
console.log('myPlayer.ads.ad.index',myPlayer.ads.ad.index);
console.log('myPlayer.ads.ad.duration',myPlayer.ads.ad.duration);
console.log('myPlayer.ads.ad.type',myPlayer.ads.ad.type);
setTimeout(function(){
console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
},500);
setTimeout(function(){
console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
},1000);
});
上記のコードからのコンソールでの出力は、ここに示されています。
メソッド
videojs-contrib-adsは、役立ついくつかの方法を提供します。非対応形式:
方法 | 説明 |
---|---|
InadBreak () | このメソッドは、startLinearAdMode と endlinearAdMode の間の間に true を返します。インテグレーションで広告が再生されることがあります。これは広告モードの一部です。 |
isAdPlaying() | 非推奨 |
isContentResuming () | 広告の後にコンテンツが再開する場合は true を返します。これは広告モードの一部です。 |
isinadMode () | プレイヤーが広告モードの場合は true を返します。 |
既知の問題
FreeWheelで同じプレーヤーを動的に再利用する
ビデオを動的にロードし、同じプレーヤーを再利用する場合、FreeWheel 設定には、FreeWheel プラグインのインスタンス化時に設定された値と同じ値が含まれますが、2 つの例外があります。最初の例外は、広告マクロを使用している場合です。2番目の例外は、player.FreeWheelPlugin.settings.Html5
player.FreeWheelPlugin.settings.Flash
またはを使用して設定を更新できることですfw-before-ad-request
イベント。
広告再生中のプレーヤーのサイズ変更
広告または動画の再生中にプレーヤーのサイズを変更した場合、プレーヤーのサイズを変更するためにプレーヤーのサイズ関数を呼び出さない限り、広告コンテンツのサイズは変更されません。他の方法(スタイル幅や高さなど)を使用してプレーヤーのサイズを変更しても、広告のサイズは変更されません。
player.dimensions(width,height)
を使用してプレーヤーのサイズを変更するときは、プラグインがサイズが変更されたことを認識できるように、fw-resizeplayer
イベントをトリガーする必要があります。これは、一部のVペイド広告では、広告のサイズがデフォルトのままであり、プレーヤーのサイズを変更しても自動的にサイズが変更されないためです。
ここに例があります:
player.dimensions(960,540);
player.trigger('fw-resizeplayer');
オーバーレイ広告
FreeWheel プラグインが Flash で広告を表示している場合、オーバーレイ広告はクリックできません。FreeWheel プラグインが HTML5 で広告をレンダリングしている場合、オーバーレイは正しい座標で表示されません。HTML5 オーバーレイ広告をクリックしても、クリックURLを追ったときにコンテンツプレーヤーは一時停止しません。
FreeWheel ライブ
ライブストリーム内の FreeWheel 広告は、ブライトコーブグローバルサービス (BGS) の支援を受けながら実装できます。
VPAID
広告コントロールバーが有効になっている場合、Vペイドコントロールで広告を再開することはできません。
更新履歴
FreeWheel プラグインのリリースノートを参照してください。
古いリリースについては、ここの changelog を参照してください。