玩家開發者基本知識：自定義插件-轉換代碼

在本主題中，您將學習如何將控制Brightcove Player的代碼轉換為自定義插件。

步驟

這些步驟假定您已經在單個HTML頁面上編寫了增強Brightcove Player的代碼。

為JavaScript和CSS創建空文件。最佳做法是，文件名應反映插件的功能。在視頻中back-forward-buttons.js和後退按鈕被使用。
從HTML頁面複製CSS，減去<style>標籤，然後粘貼到專用CSS文件中。
從HTML頁面複製JavaScript，減去<script>標籤，然後粘貼到專用的JavaScript文件中。
在JavaScript文件中，找到類似於以下代碼
```
videojs.getPlayer('myPlayerID').ready(function () {
```
並用以下內容替換它，為反映其功能的插件選擇一個名稱：
```
videojs.registerPlugin('backForwardButtons', function() {
```
請注意，CSS和JavaScript的文件名使用連字符，而插件名稱為camelCase。這只是代碼編寫者所使用的約定，您可以根據需要命名實體。
在原始HTML頁面中，刪除<style>阻止並將其替換為指向CSS文件的鏈接：
```
<link href="back-forward-buttons.css" rel="stylesheet">
```
在原始HTML頁面的正下方<script>鏈接到播放器的標籤index.min.js文件，添加第二個<script>標籤以鏈接到插件的JavaScript：
```
<script src="back-forward-buttons.js"></script>
```
在原始HTML頁面中，刪除<script>塊，並替換執行以下操作的代碼：
- 使用getPlayer()和ready()具有相關匿名事件處理程序功能的方法。
- 在事件處理程序函數中，分配一個名為myPlayer的this關鍵字，在此情況下代表玩家。
- 調用插件。
```
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.backForwardButtons();
  });
</script>
```

完整的程式碼

主要 HTML 頁面

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
  <link href="back-forward-buttons.css" rel="stylesheet">
  </head>

  <body>

    <video id="myPlayerID"
      data-video-id="5992439742001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      data-application-id=""
      controls=""
      width="640" height="360"></video>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    <script src="back-forward-buttons.js"></script>

    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.backForwardButtons();
      });
    </script>

  </body>

  </html>

自訂外掛程式

  videojs.registerPlugin('backForwardButtons', function() {
    var myPlayer = this,
        jumpAmount = 5,
        controlBar,
        insertBeforeNode,
        newElementBB = document.createElement('div'),
        newElementFB = document.createElement('div'),
        newImageBB = document.createElement('img'),
        newImageFB = document.createElement('img');

    // +++ Assign IDs for later element manipulation +++
    newElementBB.id = 'backButton';
    newElementFB.id = 'forwardButton';

    // +++ Assign properties to elements and assign to parents +++
    newImageBB.setAttribute('src', '/assets/samples/back-forward-buttons/back-button.png');
    newElementBB.appendChild(newImageBB);
    newImageFB.setAttribute('src', '/assets/samples/back-forward-buttons/forward-button.png');
    newElementFB.appendChild(newImageFB);

    // +++ Get controlbar and insert elements +++
    controlBar = myPlayer.$('.vjs-control-bar');
    // Get the element to insert buttons in front of in conrolbar
    insertBeforeNode = myPlayer.$('.vjs-volume-panel');

    // Insert the button div in proper location
    controlBar.insertBefore(newElementBB, insertBeforeNode);
    controlBar.insertBefore(newElementFB, insertBeforeNode);

    // +++ Add event listeners to jump back or forward +++
    // Back button logic, don't jump to negative times
    newElementBB.addEventListener('click', function () {
      var newTime,
          rewindAmt = jumpAmount,
          videoTime = myPlayer.currentTime();
      if (videoTime >= rewindAmt) {
        newTime = videoTime - rewindAmt;
      } else {
        newTime = 0;
      }
      myPlayer.currentTime(newTime);
    });

    // Forward button logic, don't jump past the duration
    newElementFB.addEventListener('click', function () {
      var newTime,
          forwardAmt = jumpAmount,
          videoTime = myPlayer.currentTime(),
          videoDuration = myPlayer.duration();
      if (videoTime + forwardAmt <= videoDuration) {
        newTime = videoTime + forwardAmt;
      } else {
        newTime = videoDuration;
      }
      myPlayer.currentTime(newTime);
    });
  });

自訂外掛程式的 CSS

  #backButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }
  #forwardButton img{
    margin-top: -7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
  }