サポートに連絡する| システムステータス
ページコンテンツ

    プレイヤー開発者の基本:カスタムプラグイン-理由と方法

    このトピックでは、カスタムプラグインを使用する理由を学び、その開発への高レベルのステップを学びます。
     

    なぜカスタムプラグイン?

    • 複数の場所で同じコードを複製しないでください
    • プラグインに関連付けられているすべてのコードはプレーヤーの一部になります

    ステップ

    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
          class="video-js"
          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;
        // Complete JavaScript
        // ...
      });
    

    カスタムプラグインの CSS

      /*
       CSS Here
       */

    ページの最終更新日30 Sep 2021