サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    FreeWheelプラグインによる広告

    このトピックでは、FreeWheelプラグインを使用して動画再生付きの広告を有効にする方法と、それを使用してどのように実装できるかを学びます Studio そしてカスタムコーディングを通じて。

    概要

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

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

    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
    SWF * https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf

    参考までに、プラグインと互換性のある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) テキストボックス。 フォームで提供されるオプションは、再生テクノロジを構成します。 FlashHtml5 設定セクションは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。 オプションでは、再生テクノロジを構成します。 FlashHtml5 設定セクションは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列)で設定します。

    Brightcove Player
    選択された技術
    FreeWheelPlugin adTechOrder FreeWheelプラグイン
    選択された広告技術
    html5 ["flash"、 "html5"] フラッシュ
    html5 ["html5"、 "flash"] html5
    html5 ["html5"] html5
    html5 ["フラッシュ"] フラッシュ
    フラッシュ ["flash"、 "html5"] フラッシュ
    フラッシュ ["html5"、 "flash"] フラッシュ
    フラッシュ ["html5"] ありえない
    フラッシュ ["フラッシュ"] フラッシュ

    構成

    以下の設定は、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
        • ブドウやコーヒーチェリーのような甘い果実の発酵過程において、野生酵母は糖類を用いてアルコール発酵します。 アルコールは酢酸菌によって更に 酢酸(お酢)に転化します。 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 trueunattendedPlay is false。 これは、フラグ= + play-uapl.
          • 2:tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_UNATTENDED: 手段 autoPlay is trueunattendedPlaytrue。 これは、フラグ= + play + uapl.
          • 3:tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_NONE: 手段 autoPlay is falseunattendedPlay 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を設定すると、仕事を簡単にするための広告マクロが用意されています。 広告マクロは、設定内の任意の場所に対応する値に置き換えられます。

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

    マクロ 説明
    {player.id} プレーヤーID
    {mediainfo.id} 動画ID
    {mediainfo.name} ビデオタイトル
    {mediainfo.description} 短い説明(250個の文字)
    {mediainfo.tags} ビデオに関連付けられたタグ(メタデータ)
    {mediainfo.reference_id} 参照ID
    {mediainfo.duration} 報告された動画の再生時間 Video Cloud
    {mediainfo.ad_keys} のMediaモジュールで追加および編集できる自由形式のテキスト文字列 Studio; あなたはフォームでクエリパラメータを使用する必要があります
    cust_params={mediainfo.ad_keys}
    {player.duration} によって測定されるビデオの長さ player (おそらく少し異なります mediainfo.duration おそらくもっと正確です)
    {document.referrer} 参照ページのURL
    {window.location.href} 現在のページのURL
    {player.url} のURL player
    {タイムスタンプ} 1 / 1 / 70以降の現地時間(ミリ秒)
    {ランダム} 乱数0-1兆
    /

    設定例

    "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);
    });
    イベント 次の場合に送出されます。
    広告リクエスト リクエストされた広告データ。
    広告負荷 広告リクエスト後に広告データが利用可能な場合。
    ads-ad-started 広告の再生が開始されました。
    ads-ad-ended 広告の再生が終了しました。
    ads-pause 広告が一時停止しています。
    広告再生 広告は一時停止から再開されます。
    広告 - 第1四分位 広告の合計再生時間の25%を再生しました。
    広告中点 広告の合計再生時間の50%を再生しました。
    ads-third-quartile 広告の合計再生時間の75%を再生しました。
    ads-click 視聴者が再生広告をクリックした。
    ads-volumechange 演奏広告の音量が変更されました。
    ads-pod-started リニア広告ポッド(広告のシーケンスグループ)の最初の広告が開始されました。
    ads-pod-ended リニア広告ポッド(順序付けされた広告グループ)の最後の広告が終了しました。
    ads-allpods-completed すべてのリニア広告の再生が完了しました。
    fw-before-ad-request このイベントは player オブジェクトであり、広告リクエストを送信する前にトリガーされます。 通常、プレイリストのコンテキストで使用され、FreeWheel構成設定を次のように更新します。 player.FreeWheelPlugin.settings.Html5 or 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を設定していた場合は、表示されているコードが前の設定よりも優先されます。

    デモ

    次のデモでは、わずかに異なる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 役に立つことができるいくつかのプロパティを提供します。 彼らです:

    お名前 データ型 説明
    ads.ad.id 文字列 再生する広告の一意の識別子
    ads.ad.index 特定の時間に再生される広告のインデックス。 インデックスは広告ポッド内の広告の順序値を識別します
    ads.ad.duration 広告の所要時間(秒)
    ads.ad.type 文字列 どちらでも プレロール, ミッドロール or ポストロール
    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);
    });

    上記のコードからコンソールに出力されたものを以下に示します:

    contrib-adsプロパティのコンソール

    メソッド

    videojs-contrib-ads 役に立つ方法をいくつか提供しています。 彼らです:

    方法 説明
    inAdBreak() このメソッドは、統合が広告を再生できるstartLinearAdModeとendLinearAdModeの間の時間にtrueを返します。 これは広告モードの一部です。
    isAdPlaying() 非推奨の
    isContentResuming() コンテンツが広告後に再開される場合はtrueを返します。 これは広告モードの一部です。
    isInAdMode() もし真なら player 広告モードです。

    既知の問題点

    同じを動的に再利用する 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

    ライブストリーム内のフリーホイール広告は、 Brightcove グローバルサービス(BGS).

    VPAID

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

    変更履歴

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


    ページの最終更新日:28年2020月XNUMX日