布萊特灣球員樣本：取得搜尋時間

播放器範例

當您單擊搜尋欄時，將在播放器下方顯示您單擊的時間。

看筆獲取搜索時間通過 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 來源的文件，可以做詳細的中間件：

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

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

寫入中介軟體函數。
將中介軟體函數置於指令碼標記中的播放程式頁面上，或使用 src屬性搭配 Script標記加入中介軟體函數。這兩個實現都會顯示在本文件中。
使用 use ()方法向播放程式註冊中介軟體函數，如下所示：
```
videojs.use（'mimeType'，functionName）;
```
為了模仿型你可以使用標準的視頻 mimetype，比如視頻/mp4，或使用*如果您希望中間件功能作用於所有 mime 類型。

播放器/HTML 配置

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

播放程式組態

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

其他 HTML

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

應用程式流程

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

實現中間件函數的基本語法，命名該函數 getSeekedTime。
改變 setCurrentTime ()方法來簡單地返回所尋求的時間。

建立中介軟體函數的骨架

找到標記的代碼：

// +++定義中間件功能+++

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

var getSeekedTime = function（player）{
  返回 {
  ...
};

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

找到標記的代碼：

// ###在setCurrentTime方法中設置查找時間###

這個代碼塊是實際的 setCurrentTime（）方法被改變的地方。要理解這一點，首先要知道的是傳遞給函數的 ct值反映了查看器擦洗的值。因此，您可以簡單地為適當的變量賦值，並返回此值，以便 setCurrentTime ()仍然可以正常工作。

setCurrentTime：函數setCurrentTime（ct）{
  搜索條目時間 = CT;
  退回 CT；
 }

應用程式樣式

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

使用中介軟體函數

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

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

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

 < 視頻 JS ID = "我的圖層識別碼」
  數據視頻識別碼
  資料帳戶
  數據播放器 =「默認」
  數據嵌入 =「默認」
  數據應用程序 id=""
  controls=""></video-js>

<div id =“ displayTimesHere”> </ div>

<Src=」https://players.brightcove.net/1752604059001/default_default/index.min.js "> </指令碼 >

<腳本類型 =「文本/文本」>
  var seekBarClickedTime;

  // +++定義中間件功能+++
  var getSeekedTime = function（player）{
    返回 {
    // +++在setCurrentTime方法中設置尋道時間+++
      setCurrentTime：函數setCurrentTime（ct）{
        搜索條目時間 = CT;
        退回 CT；
      }
    }
  };

  //向播放器註冊中間件
  videojs.use（'*'，getSeekedTime）;

  //在seekbar上初始化mouseup事件
  videojs.getPlayer（'myPlayerID'）。ready（function（）{
    var myPlayer = this;
    myPlayer.controlBar.progressControl.seekBar.on（'mouseup'，function（event）{
      displayTimesHere.innerHTML + = seekBarClickedTime +'<br>';
    }）；
  }）；
  </ script>

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

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

 < 視頻 JS ID = "我的圖層識別碼」
  數據視頻識別碼
  資料帳戶
  數據播放器 =「默認」
  數據嵌入 =「默認」
  數據應用程序 id=""
  控件=""></視頻>
<Src=」https://players.brightcove.net/1752604059001/default_default/index.min.js "> </指令碼 >

<script src =“ get-seeked-time.js”> </ script>

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