布萊特灣球員樣本：水平音量控制

開發順序

以下是推薦的開發順序：

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

如需這些步驟的詳細資訊，請檢閱逐步操作：插件開發指南。

iframe 或頁內嵌

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

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

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

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

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

選取實作

在此示例中，您將使用頁內嵌入代碼進行測試，然後將CSS和JavaScript文件添加到播放器。然後，您將部署插件。將水平音量插件添加到播放器後，即可使用iframe實現。

使用的API資源

以下各節詳細介紹了各種API使用的資源。

Brightcove Player API方法

control_bar.addChild()
control_bar.removeChild()

播放器

在下面的播放器中，請注意水平音量控制欄取代了默認的垂直控制欄。

它是如何運作的

以下各節介紹了示例中使用的播放器，JavaScript和CSS代碼。

建立播放器

若要建立播放程式並指派影片給它，請依照下列步驟執行：

在「玩家」模組中，建立新玩家或使用現有的玩家。
在「媒體」模組中，選取視訊並使用此播放器發佈。將視頻內容分配給播放器並發布。
複製頁內嵌程式碼，然後貼到新的 HTML 檔案中。

播放器代碼

您的頁內嵌入代碼應類似於以下內容：

    <video-js id="video_1"
      width="640px" height="360px"
      data-video-id="4172255216001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""></video-js>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

樣式表

本示例為Brightcove Player使用CSS樣式。

9-22行：在控制欄中設置元素的順序。本示例將靜音控件和音量控件放在進度條之後，但在全屏按鈕之前。

注意：控制欄使用flex容器來佈局其元素。默認情況下，彈性項目按照它們在HTML源代碼中的顯示方式進行佈局。CSS order屬性允許您控制柔性元素的位置。對於較舊的瀏覽器，您需要包括其他帶前綴的訂單屬性。

如需有關設定控制列圖示順序的詳細資訊，請參閱自訂播放程式外觀文件。
第24至26行：刪除音量控件周圍的默認陰影，以更好地匹配進度條。
第27-34行：設置音量控制的高度和背景顏色。
三十六至三十八號線在音量控件的右側添加填充，以確保其不與全屏按鈕重疊。

    <style type="text/css">
        /* Order of controls in bar, should flow in before fullscreen button.  */
        .vjs-mute-control {
          order: 7;
          -webkit-box-ordinal-group: 7;
          -moz-box-ordinal-group: 7;
          -webkit-order: 7;
          -ms-flex-order: 7;
        }
        .vjs-volume-control {
          order: 8;
          -webkit-box-ordinal-group: 8;
          -moz-box-ordinal-group: 8;
          -webkit-order: 8;
          -ms-flex-order: 8;
        }
        /* Better match progress bar */
        .video-js.video-js .vjs-volume-bar:before {
          box-shadow:none;
        }
        .video-js.video-js .vjs-volume-bar,
        .video-js.video-js .vjs-volume-bar:before,
        .video-js.video-js .vjs-volume-level {
          height: 4px;
        }
        .video-js.video-js .vjs-volume-handle {
          background-color: initial;
        }
        /* Additional padding to reduce inadvertently covering the fullscreen button */
        .vjs-volume-control {
          padding-right: 5px;
        }
    </style>

JavaScript代碼

將以下JavaScript添加到您的頁面代碼中。

第 57 行：準備就緒後獲取對播放器的引用。
第 59 行：獲取對播放器控制欄的引用。
第六十號線獲取對音量菜單按鈕的引用。
第61-62行：將靜音按鈕和音量控制元素添加到控制欄。

注意：默認情況下，控件欄中的flex項按照它們在HTML源代碼中的顯示方式進行佈局。對於IE9等較舊的瀏覽器，添加這些元素的順序很重要。在這裡，我們最後添加一個靜音按鈕，使其顯示在音量控件的左側。

注意：MuteToggle和VolumeControl類可以在Brightcove 播放器 API 索引 .
第 63 行：從控制欄中刪除默認的音量菜單按鈕。

    <script id="pageScript" type="text/javascript">
        var myPlayer;

        videojs.getPlayer('video_1').ready(function(){
            myPlayer = this;

            var control_bar = myPlayer.controlBar;
            var vmb = control_bar.volumeMenuButton;
            control_bar.addChild('VolumeControl');
            control_bar.addChild('MuteToggle');
            control_bar.removeChild(vmb);
        });
    </script>

使用插件

最佳實踐是使用插件，以便您可以輕鬆地將此功能添加到多個播放器。

創建CSS文件

將CSS樣式移動到文件中，並將其放置在Internet可訪問的URL中。

為您的CSS樣式創建一個新文件。在這種情況下，請將其命名horizontal-volume.css。
在 HTML 檔案的<head>區段中，新增下列連結以包含新建立的 CSS 檔案。
```
<link href="horizontal-volume.css" rel="stylesheet"> 
```
瀏覽 HTML 頁面。您應該看到水平的音量控制，除了現在您的樣式已從HTML頁面中刪除了。

創建JavaScript文件

將插件的JavaScript代碼移動到文件中，然後將其放置在Internet上可訪問的URL中。

為您的插件JavaScript代碼創建一個新文件。在這種情況下，請將其命名horizontal-volume.js。
將JavaScript代碼從您的主HTML文件剪切並粘貼到此新文件中。
第77,85行：使用該videojs.registerPlugin()函數包裝您的 JavaScript 代碼。第一個引數是horizontalVolume外掛程式名稱。
第78行：取得您的播放器的參考資料。
剩下的就是您的JavaScript代碼，它已在上一節中進行了回顧。

/**
 * Horizontal Volume
 */
videojs.registerPlugin('horizontalVolume', function() {
    var myPlayer = this,
    control_bar = myPlayer.controlBar,
    vmb = control_bar.volumeMenuButton;

    control_bar.addChild('VolumeControl');
    control_bar.addChild('MuteToggle');
    control_bar.removeChild(vmb);
});

在 HTML 檔案中，在現有<script>標籤下方加入下列程式碼。此程式碼包含 JavaScript 檔案，然後呼叫該 JavaScript 中定義的方法。
```
<script type="text/javascript" src="horizontal-volume.js"></script>
<script>videojs.getPlayer('video_1').horizontalVolume();</script>
```
瀏覽 HTML 頁面。您應該看到水平的音量控制，除了現在您的JavaScript代碼已從HTML頁面中刪除之外。

部署插件和CSS

要使用“播放器”模塊部署覆蓋按鈕插件，請按照下列步驟操作：

在新的視頻雲工作室中，打開播放器模塊並找到播放器。
按一下播放程式的連結以開啟播放程式屬性。
找到插件部分，然後單擊編輯。
對於 JavaScript 網址，請輸入指定您保存插件 JavaScript 的位置的網址。
對於 CSS 網址，請輸入指定外掛程式 CSS 儲存位置的 URL。
對於「名稱」，輸入水平體積。
該插件沒有選項，因此您可以將“插件選項”部分留空。
點擊節省進而發布玩家;選手。

使用框架

最佳做法是使用iframe播放器實現。如果該示例可行，則將頁內嵌入實現替換為iframe實現。

在「媒體」模組中，選取視訊並使用此播放器發佈。返回玩家模組。

複製iframe嵌入代碼，然後將其粘貼到新的HTML文件中。你的代碼應該看起來像這樣：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Brightcove Player: Horizontal Volume - iframe</title>
</head>

<body>
    <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>

</body>
</html>

瀏覽 HTML 頁面。您應該看到插件正常運行。