玩家開發者基本知識：自定義插件-為什麼和如何

在本主題中，您將了解為什麼應該使用自定義插件，並了解開發它們的高級步驟。
 

為什麼要使用自定義插件？

  • 不要在多個地方重複相同的代碼
  • 與插件關聯的所有代碼都成為播放器的一部分

步驟

  1. 編碼增強的播放器功能
  2. 創建一個僅包含CSS的新文件
  3. 創建一個包含JavaScript的新文件
    • 更改使用getPlayer()方法
  4. 鏈接到CSS和JavaScript文件，然後調用自定義插件

完整的程式碼

主要 HTML 頁面

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="custom-plugin.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="custom-plugin.js"></script>

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

  </body>

  </html>

自訂外掛程式

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

自訂外掛程式的 CSS

  /*
   CSS Here
   */