廣告與飛輪插件

概覽

此插件在 Brightcove Player 中啟用 HTML5 的 FreeWheel 廣告技術。

使用插件版本

使用FreeWheel插件時，您將需要使用版本化的URL。

作為參考，插件的版本在插件版本參考文檔。

測試廣告伺服器

您應該做的第一件事是驗證您打算使用的廣告代碼的有效性。請確定您已複製其 URL 並瀏覽至以下頁面：廣告預覽器（點擊此鏈接將導致頁面在新窗口或新標籤頁中打開）。

將廣告代碼網址粘貼到指示的表單輸入字段中。請點擊OPEN IN AD PREVIEWER。標題為Open In Ad Previewer將顯示，然後單擊OPEN按鈕來測試您的廣告。請點擊PLAY並且，如果運作正常，則您的廣告會與視頻一起顯示。如果您的廣告代碼在這個測試環境中無法運作，它將無法與 Brightcove 播放程式搭配使用。

使用正確的SDK URL

接下來的兩節提供了實現FreeWheel的替代方法。在這兩個部分中，您都將使用sdkurl。過去，您可以簡單地使用http://adm.fwmrm.net/p/[]/AdManager.js選項的值，並且知道它將指向FreeWheel SDK的最新版本。現在，您需要輸入指向特定版本的網址，例如https://mssl.fwmrm.net/libs/adm/6.24.0/AdManager.js。此外，在初始設置後，如果您希望使用最新版本的FreeWheel發布較新版本的SDK，則還需要更新該值。請注意，進行此更改後，您將需要重新發布Brightcove Player。

如果您不更新URL並繼續使用自動升級URL，那麼您將永遠指向版本6.23。

您可能想要在他們的 Brightcove 播放器集成中管理自己的 SDK 版本。這涉及將Html5.sdkurl選項傳遞給 Freewheel 插件：

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

使用播放器模組實作

要使用Players模塊實現FreeWheel插件，請按照以下步驟操作：

1. 開啟 PLAYER 模組並建立新的播放器，或找到您想要新增外掛程式的播放程式。
2. 按一下播放程式的連結以開啟播放程式的屬性。
3. 按一下左側導覽選單中的外掛程式。
4. 來自添加插件下拉菜單，選擇自定義插件。

   

5. 在「外掛程式名稱」中輸入FreeWheelPlugin。
6. 在這個網址中，輸入：

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

7. 對於 CSS 網址，請輸入：

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

8. 在 [選項 (JSON) ] 文字方塊中輸入組態選項。表格中提供的選項用於配置播放技術，其中Flash和Html5配置部分由FreeWheel提供。下面顯示了一個稍微改變的（基於安全原因）完整的配置。存根示例如下所示：

   {
     "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。這些選項在以下位置配置播放技術Flash和Html5配置部分由FreeWheel提供。下面顯示了一個稍微改變的（基於安全原因）完整的配置。存根示例如下所示：

{
  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行：在這種情況下，給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="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="4607746980001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_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"]
  • 該數組包含按優先級降序嘗試使用的廣告集成技術。
• Flash：
  • 類型：Object
  • 技術特定飛輪配置的物件（由飛輪提供）。物件包含下列選項：
  • swfurl：
    • 類型：string默認值：https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf（與FW Flash SDK v6.4.6兼容）
    • 可以根據FreeWheel Flash插件版本使用可選值。這些值可以在Using versions of the plugin本文檔頂部附近的部分。
    • 必須是Flash物件的子屬性。如果使用 Flash 廣告技術，則會直接套用至物件元素。
  • autoplay：
    • 類型：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
  • 技術特定飛輪配置的物件（由飛輪提供）。物件包含下列選項：
  • autoPlayType：
    • 類型：integer預設值：1
    • 指示內容視頻將自動播放，並且用戶知道該內容正在自動播放。
    • 傳遞給autoPlayType的值會設置發送到FreeWheel廣告服務器的廣告請求網址中的標誌，並且可以是等於相關FreeWheel SDK常量的三個整數值之一：
      • 1: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_ATTENDED：手段autoPlay是true和unattendedPlay是false。設置標誌= +play-uapl。
      • 2: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_UNATTENDED：表示autoPlay是true和unattendedPlay也是true。設置標誌= +play+uapl。
      • 3: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_NONE：表示autoPlay是false和unattendedPlay是unset。設置標誌= -play。
    • 必須是Html5物件的子屬性。如果使用 Html5 廣告技術，這將直接套用至物件元素。
  • visitorCustomId：
    • 類型：string預設值：(optional)
    • 的visitorCustomId選項可讓發布商為廣告請求傳遞自定義訪問者ID。設置後，此值將作為queryString傳遞到廣告請求網址中vcid=CustomID_001。ID將作為對訪問者JSON塊中廣告請求的響應而返回，如下所示："customId" : "CustomID_001"。
    • 必須是Html5物件的子屬性。如果使用 Html5 廣告技術，這將直接套用至物件元素。
  • subsessionToken：
    • 類型：int預設值：(optional)
    • 的subsessionToken選項允許發布者使用給定令牌啟動子會話。設定後，這個值會在廣告請求網址中傳遞為查詢字串：

      ssto=1234567890

    • 必須是Html5物件的子屬性。如果使用 Html5 廣告技術，這將直接套用至物件元素。
  • compatibleDimensions：
    • 類型：array預設值：(optional)

    • 的compatibleDimensions選項使發布者可以傳遞一系列兼容的尺寸。例如：

      compatibleDimensions: [ {width: A, height: B}, {width: X, height: Y} ]

      設定後，這個值會在廣告請求網址中傳遞為查詢字串：

      cd=widthA,heightA|widthX,heightY

    • 必須是Html5物件的子屬性。如果使用 Html5 廣告技術，這將直接套用至物件元素。
• loadWithCookie：
  • 類型：boolean預設值：false
  • 為VAST請求啟用或禁用Cookie。
• requestAdsMode：
  • 類型：string預設值：onload
  • 該屬性的可能值為：
    • onload：播放器完全加載後，請求廣告。
    • onplay：當視頻開始播放時（用戶啟動或自動播放），請求廣告。
    • oncue：在提示點的開始時間請求廣告。使用此屬性時，還請注意：
      • 僅在useMediaCuePoints屬性也設置為true。
      • 必須在內容視頻上設置Video Cloud廣告提示點。見在媒體模塊中使用提示點有關如何在內容視頻中創建提示點的說明的文檔。
      • 如果有temporalSlots下的選項Flash要么Html5屬性，則忽略設置。
• useMediaCuePoints：
  • 類型：boolean預設值：false
  • 必須設置為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"
],

adtech訂單：html5，Flash

本演示使用html5首先在adtechOder。

以下是與播放器使用的實際配置。請注意，這可以用於工作室中的options值。

{
  "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秒標記處的中片和後片。

播放器廣告庫

該視頻/視頻的聯繫方式廣告 GitHub 存儲庫包含一個插件，它提供了通過視頻廣告庫與布萊特灣播放器工作所需的共同功能。此外掛程式提供影片廣告整合所需的一般功能，並負責廣告整合商的許多問題，減少您為廣告整合所撰寫的程式碼。

性質

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提供了一些可能有用的方法。它們是：

廣告參數

廣告參數可以與GET向 FreeWheel 廣告服務器發出請求。

已知問題

使用FreeWheel動態重用同一播放器

如果要動態加載視頻並重新使用同一播放器，則FreeWheel配置設置將包含與實例化FreeWheel插件時設置的值相同的值，但有兩個例外。第一個例外是如果您使用的是廣告宏。第二個例外是您可以使用來更新設置player.FreeWheelPlugin.settings.Html5要么player.FreeWheelPlugin.settings.Flash在fw-before-ad-request事件。

在廣告播放期間調整播放器大小

如果在廣告或視頻播放期間調整播放器的大小，除非調用播放器的尺寸功能調整播放器的大小，否則廣告內容將不會調整大小。使用其他方法（例如樣式的寬度和高度）調整播放器的大小不會調整廣告的大小。

使用時player.dimensions(width,height)要調整播放器的大小，您必須觸發fw-resizeplayer事件，以使插件知道尺寸已更改。這是因為某些VPAID廣告保留了廣告的默認尺寸，並且在播放器調整尺寸時不會自動調整尺寸。

這是一個例子：

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

重疊廣告

如果FreeWheel插件正在Flash中呈現廣告，則重疊廣告不可點擊。如果FreeWheel插件使用HTML5呈現廣告，則覆蓋圖不會顯示在正確的坐標處。跟隨點擊網址後，點擊HTML5重疊式廣告不會暫停內容播放器。

FreeWheel Live

直播中的FreeWheel廣告可以在以下方面的幫助下實施： Brightcove全球服務（BGS）。

已付

如果啟用了廣告控制欄，則無法通過VPAID控件恢復廣告。

變更記錄檔

見FreeWheel 插件發行說明 .

對於舊版本，請參閱更新日誌在這裡 .