布萊特灣球員樣本：垂直音量控制

在本主題中，您將學習如何更改音量控制按鈕以顯示垂直音量滑塊，而不是默認的水平佈局。

播放器範例

開始播放視訊，並將滑鼠移到控制列的音量按鈕上。您應該看到一個垂直音量滑塊，而不是默認的水平滑塊。

看筆垂直體積通過Brightcove學習服務（ @ bcls1969） 上密碼筆。

原始碼

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

使用編碼器

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

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

開發順序

以下是推薦的開發順序：

  1. 使用網頁內嵌播放程式實作來測試播放器、外掛程式和 CSS 的功能 (如果需要 CSS)
  2. 將插件的 JavaScript 和 CSS 放入單獨的文件中進行本地測試
  3. 一旦你解決了任何錯誤，將插件代碼和 CSS 部署到你的服務器
  4. 使用工作室將插件和 CSS 添加到您的播放器
  5. 如果您確定 iframe 實現更適合（詳見下一節），請替換頁內嵌播放器實現

如需這些步驟的詳細資訊，請檢閱逐步：外掛程式開發指南。

iframe 或頁內嵌

在開發 Brightcove 播放器的增強功能時，您需要決定代碼是否最適合 iframe 或頁內嵌實現。最佳實踐建議是構建一個插件以與 iframe 實現一起使用。使用 iframe 播放器的優點是：

  • 沒有與現有的JavaScript 和/或CSS 發生衝突
  • 自動回應
  • iframe 簡化了社交媒體應用程序中的使用（或者每當視頻需要「旅行」到其他應用程序時）

雖然整合頁內嵌播放程式可能會比較複雜，但有時候您會針對該實作規劃程式碼。概括，這種方法是最好的時候包含的頁面需要與播放器進行通信。具體來說，這裡有一些例子：

  • 包含頁面中的程式碼需要監聽播放器賽事並採取行動
  • 播放器使用包含頁面的樣式
  • iframe 將導致應用程序邏輯失敗，例如從包含頁面的重定向

即使您的最終實作未使用 iframe 程式碼，您仍然可以將頁面內嵌程式碼與 JavaScript 的外掛程式搭配使用，並為您的 CSS 使用個別檔案。這封裝了你的邏輯，以便您可以輕鬆地在多個玩家中使用它。

使用的 API /外掛程式資源

API 方法
bc（）方法

播放器/HTML 配置

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

播放程式組態

因為我們要在創建播放器之前修改控制欄，所以我們將通過刪除播放器中的某些屬性來延遲Brightcove Player的實例化。<video>標籤。有關此的更多信息，請參見延遲玩家實例化文件。

修改您的播放器嵌入代碼，如下所示：

  1. 添加id歸因於video在播放器中嵌入代碼
  2. 從中刪除以下屬性video標籤：
    • data-account
    • data-player
    • data-video-id

您的播放器嵌入代碼現在應類似於以下內容：

<video-js id="myPlayerID"
  data-embed="default"
  data-application-id
  width="640" height="360"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

應用程式流程

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

  • 定義播放器選項
  • 新增玩家屬性
  • 建立播放器

定義播放器選項

找到標記的代碼：

// +++ Define the player options +++

定義volumePanel因此它是垂直的，並且不與控制欄成一直線。

新增玩家屬性

找到標記的代碼：

// +++ Add the player attributes +++

將以下具有您的值的玩家屬性添加到<video>標籤。

  • data-account
  • data-player
  • data-video-id

建立播放器

找到標記的代碼：

// +++ Create the player +++

通過將控制欄選項傳遞到bc（）方法。

應用程式樣式

此範例沒有其他樣式。

更新多個玩家

要更新HTML頁面上的所有播放器，您可以使用videojs.hook()功能。

掛鉤功能

掛鉤允許您在某些Video.js生命週期時刻添加功能或更改播放器外觀。使用掛鉤功能，通過將播放器選項傳遞到HTML播放器中，可以更新HTML頁面上的所有播放器。videojs.hook()功能。

有關詳細信息，請參見Video.js掛鉤文檔。

播放器範例

此示例更改了音量控制按鈕，以顯示頁面上所有播放器的垂直音量滑塊。

開始播放視訊，並將滑鼠移到控制列的音量按鈕上。您應該看到兩個播放器的垂直音量滑塊，而不是默認的水平滑塊。

看筆使用掛鉤的垂直體積通過Brightcove學習服務（ @ bcls1969） 上密碼筆。

播放程式組態

您將在HTML頁面中延遲創建播放器，就像在第一個例子在本文檔中。

應用程式流程

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

  • 使用播放器選項定義掛鉤功能
  • 新增玩家屬性
  • 執行掛接功能
  • 建立玩家

使用播放器選項定義掛鉤功能

找到標記的代碼：

// +++ Define the hook function with player options +++

定義鉤子函數beforeSetup生命週期時刻，其中包含播放器選項。對於播放器選項，設置volumePanel顯示為垂直而不與控制欄內嵌。

新增玩家屬性

找到標記的代碼：

// +++ Add the player attributes +++

將以下具有您的值的玩家屬性添加到<video>每個玩家的標籤。

  • data-account
  • data-player
  • data-video-id

執行掛接功能

找到標記的代碼：

// +++ Execute the hook function +++

使用修改傳遞給播放器的選項beforeSetup生命週期時刻Video.js鉤子功能。

建立玩家

找到標記的代碼：

// +++ Create the players +++

使用實例化每個玩家bc（）方法。