布萊特灣球員樣本：使用「取消靜音」按鈕自動播放

播放器範例

以下視頻的運行方式會有所不同，具體取決於您運行該視頻的瀏覽器/平台。如果視頻將自動播放音頻，它會這樣做。如果沒有，您將看到視頻開始播放，但是會出現一個取消靜音按鈕。如果單擊該按鈕，您將聽到視頻的音頻。通常，在使用iOS，Safari或Chrome瀏覽器時，如果視頻未靜音，則視頻不會自動播放。該示例演示了一種自動播放視頻的方法，並提供了一個顯而易見的取消靜音按鈕。

如果您使用的是 IMA3 預先片段，請參閱本文件中的「使用前段廣告」一節。本部分詳細說明了您需要對以下CodePen中顯示的代碼進行的細微更改，以使該功能與IMA前置廣告一起使用。

看筆使用取消靜音按鈕自動播放通過 Brightcove 學習服務（ @rcrooks1969） 在代碼筆 .

原始碼

在 GitHub 上查看完整的解決方案。

使用的 API /外掛程式資源

播放器/HTML 配置

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

播放程式組態

除了標準包含的id在裡面video標籤，playsinline為 iOS 功能添加了屬性：

<div id="playerContainer" class="outer">
   <video-js id="myPlayerID"
     data-video-id="5755775186001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     data-application-id=""
     controls=""
     playsinline></video-js>
</div>

其他 HTML

除上一節中提到的HTML元素外，沒有其他HTML元素被添加到頁面中。

應用程式流程

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

• 使用該play()方法嘗試播放視頻。該方法的調用被分配給一個變量，這將保存由 JavaScript 承諾返回的值。
• 如果諾言得以解決（正在播放視頻），請取消播放器靜音並設置音量。
• 如果承諾被拒絕（視頻未播放），請執行以下操作：
  • 使播放器靜音，然後開始播放視頻（由於播放器已靜音，現在將執行此操作）。
  • 動態創建一個 HTML 按鈕元素，作為取消靜音按鈕。
  • 在按鈕上添加一個 click事件偵聽器。
  • 配置按鈕的文本，樣式等。
  • 將按鈕放在播放器上。

嘗試播放視頻

找到標記的代碼：

// ### Wait for loadedmetadata then try to play video ###

按照標準程序，您等待loadedmetadata使用前的事件play()方法。從方法調用返回的 promise 存儲在promise變量中。如果正在播放視頻，則可以取消播放器靜音並設置音量。

禁止自動播放時，將播放器靜音並播放視頻

找到標記的代碼：

// ### If autoplay prevented: mute the video, play video and display unmute button ###

在這裡，承諾的catch邏輯使您可以在視頻未在播放器中啟動時採取行動。播放器已通過編程方式靜音，因此將播放視頻。該play()方法被再次調用，這將啟動視頻。按照此代碼，將動態創建和配置按鈕。

將click事件偵聽器添加到按鈕

找到標記的代碼：

// ### Add button's event listener ###

使用 JavaScript 的addEventListener()，一個點擊的事件處理程序是動態創建的。在事件處理程序中，將播放器取消靜音，設置音量級別，最後將按鈕從DOM中刪除。

配置按鈕

找到標記的代碼：

// ###  Configure the button ###

在此代碼部分中，按鈕的標籤被設置，配置按鈕的外觀，並添加了class一個用於定位按鈕的 CSS 引用。

將按鈕添加到容器

找到標記的代碼：

// ### Add the button to the container ###

單行程式碼會將按鈕置於限制播放div程式的按鈕中。

使用片頭廣告

由於顯示取消靜音按鈕時正在播放廣告，因此您需要取消靜音廣告播放器而不是內容播放器。為此，您可以將以下內容用於點擊處理程序：

button.addEventListener("click", function() {
  myPlayer.ima3.adPlayer.muted(false);
  myPlayer.ima3.adPlayer.volume(volumeLevel);
  //myPlayer.muted(false);
  //myPlayer.volume(volumeLevel);
  playerContainer.removeChild(button);
}

內容播放器音量控制的兩行代碼被註釋掉，僅留在比較之內。

您不需要對非 IOS/Safari/Chrome 程式碼進行相同的變更，因為在廣告載入前 (在loadstart活動中) 載入音量已變更，而且這些變更會在載入時傳送至廣告播放器。

看到這個代碼打開一個工作的例子。

應用程式樣式

三個CSS選擇器執行以下操作：

• 設置視頻height和width到100%填充放置它的容器。
• 創建一個類選擇器div，用於圍繞播放器。使用的值對應於播放器的大小。
• 創建另一個類選擇器，將取消靜音按鈕放置在圍繞播放器的中心。div

外掛程式碼

通常，當將 JavaScript 轉換為布萊特灣播放器插件名義更改時，需要更改。其中一項必要的變更是以定義外掛程ready()式的程式碼取代方法的標準使用方法。

以下是將與播放器一起使用的 JavaScript 代碼的常用開始：

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

您將變更第一行，以使用標準語法來啟動 Brightcove 播放程式外掛程式：

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

如前所述，您可以在本文檔的相應 GitHub 存儲庫：unmute-button.js 中看到該插件的 JavaScript 代碼。

在播放器上使用外掛程式

一旦您將插件的 CSS 和 JavaScript 文件存儲在可訪問互聯網的位置，您可以使用該插件與播放器。在工作室的播放器模塊中，您可以選擇一個播放器，然後在插件部分將 URL 添加到 CSS 和 JavaScript 文件中，如果需要選項，還可以添加名稱和選項。