布萊特灣球員樣本：外游 (僅廣告) 播放器

在本主題中，您將學習如何為沒有常規視頻內容的IMA3廣告創建流式播放器（僅限廣告）。

概覽

此外部Ad Player示例向您展示瞭如何在具有其他非視頻元素的網頁中動態加載Brightcove Player。視頻廣告是播放器播放的唯一內容。播放器通常在頁面佈局內擴展，如本示例所示，但也可以出現在頁面的特殊區域或作為覆蓋圖。播放完廣告後，播放器便消失了。

播放器範例

此示例提供了輔助JavaScript函數，這些函數演示瞭如何動態調整<div>頁面DOM中的元素，在其中註入Brightcove Player，加載並播放廣告，然後刪除該播放器。播放的廣告是根據廣告代碼配置的。播放器默認設置為自動播放和靜音，這是它將在某些瀏覽器中運行的唯一方法。您可以選擇更改這些設置。

此樣本可以按原樣使用，也可以復制和修改以與您的自定義頁面設計一起使用。

看筆18065-ad-only-plugin通過Brightcove學習服務（ bcls1969） 上密碼筆。

原始碼

觀看GitHub上的完整解決方案。

使用編碼器

以下是一些有效使用上述 CodePen 的提示：

  • 按一下Result按鈕來切換播放器的實際顯示。
  • 按一下HTML/CSS/JS按鈕以顯示其中一種代碼類型。
  • 在本文件後面，應用程序中使用的邏輯，流程和樣式將在播放器 /HTML 配置，應用程序流程和應用程序樣式部分中討論。跟著這些章節中的資訊一起遵循的最佳方式是：
    1. 點擊 CodePen 中的EDIT ON CODEPEN按鈕，並在一個瀏覽器/瀏覽器選項卡中提供的代碼。
    2. 在 CodePen 中，調整您要顯示的程式碼。您可以在 CodePen 中變更不同的程式碼區段的寬度。
    3. 在其他瀏覽器/瀏覽器選項卡中查看播放器 /HTML 配置，應用程序流程和/或應用程序樣式部分。您現在可以遵循程式碼說明，並同時檢視程式碼。

應用程式流程

這個應用程序背後的基本邏輯是：

  • 此示例顯示了帶有隱藏內容的文本文章樣式的網頁<div>放置在文章中的元素。計時器關閉後，此隱藏的div會展開並在其中顯示播放器。

  • 播放器使用 VAST 廣告代碼響應來播放廣告。
  • 廣告播放完畢後，將播放器卸載並從DOM中刪除。

播放器/HTML 配置

本節詳細說明玩家建立期間所需的任何特殊配置。此外，除了頁面內嵌播放程式實作程式碼之外，還會說明必須新增至頁面的其他 HTML 元素。

播放程式組態

您為此範例建立的 Brightcove 播放程式不需要特殊設定。

其他 HTML

在HTML文件中，您將包括以下內容：

  1. 一種<div>元素與id屬性分配給您選擇的值。JavaScript代碼將在其中創建您的Brightcove Player <div>元件。 
    <div id="adPlayerDiv"></div>

  2. 與Brightcove Player關聯的JavaScript文件。它看起來應該類似於：

    <script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

  3. IMA3插件的JavaScript和CSS文件。這是為了與Google的IMA3 HTML5 SDK集成廣告。

    <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
<script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

  4. 名為的幫助程序庫adonly.js。您可以使用未經修改的此文件，因為它是從Brightcove的播放器來源託管的，並通過CDN提供。如果選擇，您可以使用此JavaScript代碼作為指南來創建自己的加載程序腳本並將其託管在您自己的服務器上。該文件也可以包含在播放器配置中。

    <script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>

    如果您選擇將其直接包含在頁面中，則還可以使用CDN託管的縮小版本。

    <script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>

 

公共職能

的adonly.js庫具有兩個公開的公共功能：

  • expandAndInjectAdOnlyPlayer()：展開一個<div>並在其中註入僅廣告播放器。
  • injectAdOnlyPlayer()：將僅廣告播放器注入給定<div>（無動畫）。

選項

的expandAndInjectAdOnlyPlayer()函數採用以下參數：

  • muted
    • 可選。值：真，假。預設值：真實
  • autoplay
    • 可選。值：真，假。預設值：真實
  • adTag
    • 廣告代碼
  • div
    • 您要在其中插入廣告播放器的div
  • height
    • 您要擴展div的高度（以像素為單位）
  • animationDuration
    • 動畫div高度擴展需要花費多少毫秒

的injectAdOnlyPlayer()功能除了高度和動畫持續時間外，都採用相同的參數。

應用程式樣式

此示例使用IMA3插件提供的CSS樣式。

外掛程式碼

本示例使用已經作為插件構建的JavaScript代碼。您可以在本文檔的相應GitHub存儲庫中看到以下代碼： adonly.js。

加載時間優化

此示例使用Brightcove Player，並在運行時包含IMA插件。您可以按原樣使用此示例，但可以更改帳戶的播放器代碼。

為了稍微優化加載時間，您應該在播放器配置中包含IMA插件。為此，請參閱以下文檔：