布萊特灣球員樣本：停用向前清理

在本主題中，您將學習如何使用中間件功能禁用前向擦洗，直到播放了指定百分比的視頻為止。

播放器範例

最初，您將無法向前擦洗，但是可以向後擦洗。視頻播放達到50％後，您可以向前或向後滑動。在代碼中可以輕鬆設置何時允許向前擦洗的百分比。

看筆禁用正向擦洗通過 Brightcove 學習服務（ @rcrooks1969） 在代碼筆 .

原始碼

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

使用編碼器

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

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

中介軟體函數

此範例會使用 Video.js 中介軟體來實作程式碼解決方案。在非常高的層次，中間件最有價值的用例是當你想攔截和改變播放器的核心行為時，例如設置源或當前時間。一般來說，Video.js 中介軟體並未在本文件中討論長度，但會說明用於中介軟體函式的實際程式碼。以下是來自 Video.js 來源的文件，可以做詳細的中間件：

實現與布萊特灣播放器的中間件功能

使用中間件函數的最簡單方法是：

  1. 寫入中介軟體函數。
  2. 將中介軟體函數置於標籤中的播放程式頁面上，或使用具有script標籤的src屬性加入中介軟體函數。script這兩個實現都會顯示在本文件中。
  3. 使用use()方法向播放程式註冊中介軟體函數，如下所示： 
    videojs.use('mimeType', functionName);

    為了模仿型你可以使用標準的視頻 mimetype，比如視頻/mp4，或使用*如果您希望中間件功能作用於所有 mime 類型。

播放器/HTML 配置

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

播放程式組態

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

其他 HTML

不會將其他 HTML 元素新增至頁面。

應用程式流程

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

  • 實作中介軟體函數的基本語法，命名函數disableForwardScrubbing。
  • 實現所需的setSource()方法。
  • 變更方setCurrentTime()法，以檢查檢視者嘗試清除的時間是否少於播放程式目前的時間，或是向前移動百分比已過。如果任何一個為真，則將播放頭移至該時間。如果為false，請在當前時間播放視頻。

建立中介軟體函數的骨架

找到標記的代碼：

// +++ Define the middleware function+++

用於創建中間件函數的基本語法如下：

var disableForwardScrubbing = function(player) {
  return {
  ...
};

請注意，該player對象被傳遞給函數。

實施該setSource()方法

找到標記的代碼：

// ### Implement setSource() ###

這是每個中間件功能的必需方法。使用顯示的語法表示中介軟體永遠會被選取，而不論視訊類型為何：

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

更改設置當前時間（）方法

找到標記的代碼：

// ### Alter the setCurrentTime method ###

這個代碼塊是實際的方setCurrentTime()法被改變的地方。要理解這一點，首先要知道的ct是傳遞給函數的值反映了查看器擦洗的值。if陳述式會檢查新值是否小於玩家目前的時間，或是超過百分比以允許向前擦洗。如果任何一個為true，則返回新值，這將導致播放頭移動到新值。如果條件為假，則表示觀看者試圖在允許之前進行向前擦洗，則返回播放器的當前時間，並且播放不會更改。

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

應用程式樣式

頁面上的 CSS 只是設置播放器的大小。

使用中介軟體函數

一旦中間件函數已被寫入，你想要使用它。前面提到了兩種方式，現在將詳細說明。

與玩家在同一頁面上的程式碼

在這裡，您可以在與播放器相同的頁面上定義中間件功能，然後註冊它。

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

包含在播放器頁面上的代碼

在下列程式碼中，中介軟體函數的 JavaScript 和註冊它的use()方法只包含在頁面中。

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

有關完整代碼，請參閱 GitHub 倉庫中的單獨文件中的功能部分。