FreeWheel

概要

このプラグインは、Brightcove Playerで HTML5 の FreeWheel 広告技術を有効にします。

プラグインのバージョンを使用する

FreeWheel プラグインを使用する場合は、バージョン管理された URL を使用する必要があります。

参考までに、プラグインのバージョンは「プラグインバージョンリファレンス」ドキュメントで追跡されています。

広告サーバーをテストする

最初に行うべきことは、使用する予定の広告タグの有効性を検証することです。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 プラグインを実装するには、次の手順に従います。

1. を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
2. プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
3. 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
4. [ プラグインの追加 ] ドロップダウンから、[ カスタムプラグイン ] を選択します。

   

5. [ プラグイン名 ] に、と入力しますFreeWheelPlugin。
6. JavaScript の URL には、次のように入力します。

   https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js   

7. CSS の URL には、次のように入力します。

   https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css   

8. [ オプション (JSON)] テキストボックスに構成オプションを入力します。フォームで提供されるオプションは、FreeWheel FlashHtml5によって提供される再生技術および設定セクションを設定します。（セキュリティ上の理由から）少し変更された、完全な構成を以下に示します。スタブの例を次に示します。

   {
     "Html5": {
       "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
       "serverUrl": "http://cue.v.fwmrm.net/..."
       "profile": "3aaa_profile",
       ...
     }
   }

9. [ 保存] をクリックします。
10. プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
11. 開くダイアログを閉じるには、[ 閉じる] をクリックします。

コードを使用して実装する

プラグインを実装するには、プラグインコードの場所、必要に応じてスタイルシート、プラグイン名、プラグイン設定オプションを知る必要があります。プラグインコードとスタイルシートの場所は次のとおりです。

https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css   

プラグインの名前はですFreeWheelPlugin。オプションは、FreeWheel FlashHtml5が提供する再生技術および設定セクションを設定します。セキュリティ上の理由から、少し変更された、完全な設定を以下に示します。スタブの例を次に示します。

{
  Html5: {
    sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    serverUrl: "http://cue.v.fwmrm.net/..."
    profile: "3aaa_profile",
    ...
}

以下は、プレーヤーのページ内埋め込み実装を使用して、FreeWheelプラグインをプレーヤーの単一インスタンスに関連付けることを示しています。

• 90行目です:linkタグを使用して、HTML headページのにプラグインの CSS を含めます。
• 92行目：videoidタグに何らかの値を持つ属性を与えます。この場合は 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 を設定します。
    • 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 の設定時にジョブを簡単にするために利用できる広告マクロがあります。広告マクロは、設定内の任意の場所で対応する値に置き換えられます。

次に、置換された値が使用される変数の完全なリストを示します。

cust_params={mediainfo.ad_keys}

設定例

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

動的サーバーの 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は、役立ついくつかのプロパティを提供します。非対応形式:

次のコードは、プロパティの使用方法を示しています。

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は、役立ついくつかの方法を提供します。非対応形式:

既知の問題

FreeWheelで同じプレーヤーを動的に再利用する

ビデオを動的にロードし、同じプレーヤーを再利用する場合、FreeWheel 設定には、FreeWheel プラグインのインスタンス化時に設定された値と同じ値が含まれますが、2 つの例外があります。最初の例外は、広告マクロを使用している場合です。2番目の例外は、player.FreeWheelPlugin.settings.Html5player.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 を参照してください。