プレーヤー開発の基本：カスタムプラグイン ― 必要な理由と導入方法

このトピックでは、カスタムプラグインを使用すべき理由と、その開発手順の概要について説明します。
 

なぜカスタムプラグインが必要なのか？

  • 同じコードを複数箇所で重複させないため
  • プラグインに関連するすべてのコードがプレーヤーの一部になるため

手順

  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>

カスタムプラグインの JavaScript

        videojs.registerPlugin('pluginName', function() {
          var myPlayer = this;
          // 完成した JavaScript
          // ...
        });

カスタムプラグインの CSS

        /*
         CSS 記述エリア
         */