FreeWheelプラグインによる広告

概要

このプラグインを使用すると、FlashまたはHTML5のFreeWheel広告技術を Brightcove Player。 FreeWheelプラグインのデフォルトレンダリングオプションは、次のように設定されています。 Html5 （詳細については、 adTechOrder オプション）。

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

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

参考までに、プラグインと互換性のあるSWFのバージョンは、 プラグインバージョンリファレンス の資料をご参照ください。

広告サーバーのテスト

まず、使用する予定の広告タグの有効性を確認する必要があります。 URLをコピーして、次のページを参照してください。 広告プレビューア （このリンクをクリックすると、ページが新しいウィンドウまたはタブで開かれます）。

指定されたフォーム入力フィールドに広告タグURLを貼り付けます。 クリック ADプレビューアで開く。 ポップアップ 広告プレビューアで開く が表示され、次に OPEN ボタンをクリックして広告をテストします。 クリック 遊びます 正しく機能していると、広告に動画が散在して表示されます。 このテスト環境で広告タグが機能していない場合は、広告タグでは機能しません Brightcove Player.

正しいSDK URLを使用する

次の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を指すことになります。

独自のSDKバージョンを管理することもできます Brightcove Player 統合。 これには、 Html5.sdkurl FreeWheelプラグインのオプション：

player.FreeWheelPlugin({
  Html5: {
    sdkurl: 'preferred-sdk-url'
  }
});

使用して実装 Playersモジュール

を使用してFreeWheelプラグインを実装するには Playersモジュール、次の手順に従います。

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

   

5. から プラグインを追加する select カスタムプラグイン.
6. 　 プラグイン名 入力します FreeWheelPlugin.
7. 　 JavaScriptを URL、入力：

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

8. 　 CSS URL、入力：

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

9. 構成オプションを オプション（JSON） テキストボックス。 フォームで提供されるオプションは、再生テクノロジを構成します。 Flash 更に Html5 設定セクションはFreeWheelによって提供されています。 わずかな変更（セキュリティ上の理由から）完全な設定が表示されます 以下 。 スタブの例を以下に示します。

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

10. ナビゲーションヘッダーの セットで€６.
11. 公開するには player、クリック パブリッシュと埋め込み>変更の公開をクリックします。.
12. 開いているダイアログを閉じるには、 閉じる.

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

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

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

プラグインの名前は FreeWheelPlugin。 オプションでは、再生テクノロジを構成します。 Flash 更に Html5 設定セクションはFreeWheelによって提供されています。 わずかな変更（セキュリティ上の理由から）完全な設定が表示されます 以下 。 スタブの例を以下に示します。

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

以下は、ページはめ込みの実装の使用を示しています player FreeWheelプラグインを、 player.

• ライン90： link タグを使用して、プラグインのCSSを head HTMLページの
• ライン92： video タグに id この場合、ある値を持つ属性 myPlayerID.
• ライン100： script タグを使用して、プラグインのJavaScriptを body HTMLページの
• 105-125：プラグインを初期化し、カスタムオプションを渡します。
• 107行目：への参照を作成します player.

<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({
      adTechOrder: ["html5"],
      Flash: {
        sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
        serverUrl: "http://cue.v.fwmrm.net/..."
        profile: "3aaa_profile",
        ...
      },
      Html5: {
        sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
        serverUrl: "http://cue.v.fwmrm.net/..."
        profile: "3aaa_profile",
        ...
      }
    });
  });
</script>

レンダリングオプション

次の表は、FreeWheelプラグインが技術的選択に基づいて広告（3列）をレンダリングする技術を示しています。 Brightcove Player （列1）および adTechOrder プラグイン（2列）で設定します。

構成

以下の設定は、FreeWheelプラグインを設定するために使用されます。

• adTechOrder:
  • タイプ： Array デフォルト値： ["html5"]
  • この配列には、優先順位の降順に使用を試みる広告統合テクノロジが含まれています。
• フラッシュ:
  • タイプ： Object
  • Tech特有のFreeWheel設定のオブジェクト（FreeWheelによって提供される）。 オブジェクトには次のオプションがあります。
  • swfurl:
    • タイプ： string デフォルト値： https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf （FW Flash SDK v6.4.6と互換性があります）
    • オプションの値は、FreeWheel Flash Pluginのバージョンに基づいて使用できます。 これらの値は、 プラグインのバージョンの使用 このドキュメントの上部にあるセクションを参照してください。
    • 子供の財産でなければならない Flash オブジェクト。 これは、Flash広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
  • 自動再生:
    • タイプ： boolean デフォルト値： true
    • コンテンツが自動再生されるかどうかを示します。
    • 子供の財産でなければならない Flash オブジェクト。 これは、Flash広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
  • unattendedPlay:
    • タイプ： boolean デフォルト値： false
    • ブドウやコーヒーチェリーのような甘い果実の発酵過程において、野生酵母は糖類を用いてアルコール発酵します。 アルコールは酢酸菌によって更に<i> 酢酸</i>（お酢）に転化します。 autoPlay trueに設定され、 unattendedPlay ユーザーが自動再生を認識しているかどうかを示します。
    • 子供の財産でなければならない Flash オブジェクト。 これは、Flash広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
  • visitorCustomId:
    • タイプ： string デフォルト値： unset
    • サイト運営者が広告リクエストのカスタム訪問ユーザーIDを渡すことを許可します。 設定されると、この値は要求ペイロードのvisitorブロックに渡されます。 customId = "CustomID_001"。 idは、オープニングビジタータグの広告リクエストに対する応答として属性として返されます。 customId = "CustomID_001".
    • 子供の財産でなければならない Flash オブジェクト。 これは、Flash広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
• Html5:
  • タイプ： Object
  • Tech特有のFreeWheel設定のオブジェクト（FreeWheelによって提供される）。 オブジェクトには次のオプションがあります。
  • autoPlayType:
    • タイプ： integer デフォルト値： 1
    • コンテンツビデオが自動再生され、コンテンツが自動再生されていることをユーザーが認識していることを示します。
    • autoPlayTypeに渡される値は、FreeWheel広告サーバーに送信される広告要求URLにフラグを設定します。これらは、関連するFreeWheel SDK定数に相当する3つの整数値のいずれかになります。
      • 1：tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_ATTENDED： 手段 autoPlay is true 更に unattendedPlay is false。 これは、フラグ= + play-uapl.
      • 2：tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_UNATTENDED： 手段 autoPlay is true 更に unattendedPlay も true。 これは、フラグ= + play + uapl.
      • 3：tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_NONE： 手段 autoPlay is false 更に unattendedPlay is unset。 これは、フラグ= -プレイ.
    • 子供の財産でなければならない Html5 オブジェクト。 これは、Html5広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
  • visitorCustomId:
    • タイプ： string デフォルト値： (optional)
    • 　 visitorCustomId オプションを指定すると、サイト運営者は広告リクエストのカスタムビジターIDを渡すことができます。 設定すると、この値はqueryStringとして広告リクエストURLに渡されます vcid = CustomID_001。 この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広告技術が使用されている場合は、オブジェクト要素に直接適用されます。
• loadWithCookie:
  • タイプ： boolean デフォルト値： false
  • VASTリクエストのCookieを有効または無効にします。
• requestAdsMode:
  • タイプ： string デフォルト値： onload
  • プロパティの値は次のとおりです。
    • onload：広告は、 player 完全にロードされています。
    • onplay：動画の再生が開始されると、ユーザーの開始または自動再生のいずれかで広告がリクエストされます。
    • oncue：広告はキューポイントの開始時に要求されます。 このプロパティを使用する場合は、次の点にも注意してください。
      • 機能しているのは、 useMediaCuePoints プロパティも設定されています true.
      • Video Cloud コンテンツビデオに広告キューポイントを設定する必要があります。 を参照してください メディアモジュールのキューポイントの操作 コンテンツビデオでキューポイントを作成する方法については、ドキュメントを参照してください。
      • ある場合は temporalSlots オプションの下に Flash or Html5 プロパティでは、設定は無視されます。
• useMediaCuePoints:
  • タイプ： boolean デフォルト値： false
  • 使用するには、trueに設定する必要があります Video Cloud 広告をトリガする広告キューポイント。 と一緒に使用する必要があります requestAdsMode: 'oncue' プロパティと割り当てられた値。

広告マクロ

FreeWheelを設定すると、仕事を簡単にするための広告マクロが用意されています。 広告マクロは、設定内の任意の場所に対応する値に置き換えられます。

置換された値が使用される変数の完全なリストは次のとおりです。

cust_params={mediainfo.ad_keys}

設定例

"plugins": [{
  "name": "FreeWheelPlugin",
  "options": {
    "Flash": {
      "networkId": 99999,
      "profile": "2aaa_profile",
      "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
      "serverUrl": "http://cue.v.fwmrm.net/ad/h/5",
      "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
      }, {
        "adUnit": "overlay",
        "id": "Overlay_1",
        "timePosition": 10
      }],
      "videoAssetCustomId": "your value here",
      "videoAssetDuration": 500
    },
    "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
    },
    "adTechOrder": [
      "flash",
      "html5"
    ],
    "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を設定していた場合は、表示されているコードが前の設定よりも優先されます。

デモ

次のデモでは、わずかに異なるFreeWheel構成を使用し、結果の player。 どちらの構成でも、プレロール、5秒のミッドロール、そしてポストロールが再生されます。 構成は同じですが、 adtechOrder 異なります。 最初のデモで html5 ここに示すように、最初です。

"adTechOrder": [
  "html5",
  "flash"
],

2番目の順序では、順序が逆になります。

adtech order：html5、flash

このデモでは html5 最初の adtechOder.

以下は、で使用される実際の構成です player。 これは、 オプション 値 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
}

adtech order：flash、html5

このデモでは flash 最初の adtechOder.

以下は、で使用される実際の構成です player。 これは、 オプション 値 Studio.

{
  "Flash": {
    "networkId": 90750,
    "profile": "3pqa_profile",
    "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    "serverUrl": "http://cue.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
  },
  "Html5": {
    "keyValues": [{
      "feature": "simpleAds",
      "module": "DemoPlayer"
    }, {
      "feature": "trackingURLs"
    }],
    "networkId": 96749,
    "profile": "global-js",
    "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    "serverUrl": "http://cue.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": [
    "flash",
    "html5"
  ],
  "debug": true,
  "prerollTimeout": 1000,
  "timeout": 5000
}

プレイリスト

このデモでは、HTMLの最初の設定とプレイリストを使用しています。 プレイリストの各ビデオには、プレロール、5セカンドマークのミッドロール、ポストロールが表示されます。

Player 広告ライブラリ

　 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 役に立つ方法をいくつか提供しています。 彼らです：

既知の問題点

同じを動的に再利用する player FreeWheelを使用

動画を動的に読み込んで再利用する場合 player、FreeWheel構成設定には、FreeWheelプラグインがインスタンス化されたときに設定されたものと同じ値が含まれますが、XNUMXつの例外があります。 最初の例外は、広告マクロを使用している場合です。 XNUMX番目の例外は、次を使用して設定を更新できることです。 player.FreeWheelPlugin.settings.Html5 or player.FreeWheelPlugin.settings.Flash 〜に fw-before-ad-request イベント。

サイズ変更 player 広告の再生中

もし player 広告または動画の再生中にサイズが変更された場合、広告コンテンツは playerの寸法関数が呼び出され、 player。 サイズ変更 player 他の方法（例：スタイルの幅と高さ）を使用すると、広告のサイズは変更されません。

使用時 player.dimensions(width,height) サイズを変更するには player、トリガーする必要があります fw-resizeplayer プラグインが寸法が変更されたことを認識するようにイベント。 これは、一部のVPAID広告は広告のデフォルトの寸法を保持し、 player サイズを変更します。

player.dimensions(960,540);
player.trigger('fw-resizeplayer');

オーバーレイ広告

FreeWheelプラグインがFlashで広告をレンダリングしている場合、オーバーレイ広告はクリックできません。 FreeWheelプラグインがHTML5で広告をレンダリングしている場合、オーバーレイが正しい座標に表示されません。 HTML5オーバーレイ広告をクリックしてもコンテンツは一時停止しません player クリックURLをたどったとき。

フリーホイール Live

FreeWheelの広告 live ストリームは、 Brightcove グローバルサービス（BGS）.

VPAID

広告コントロールバーが有効な場合、VPAIDコントロールを使用して広告を再開することはできません。

変更履歴

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