サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    ステップバイステップ:Video.jsプラグインジェネレータ

    このトピックでは、video.jsプラグインジェネレータを使用してプラグインを作成およびテストする方法を学習します。 Brightcove Player.

    video.jsプラグインジェネレータは、従来のプラグインを作成するために必要なファイルとフォルダを作成します。 これにはテスト環境が含まれているため、プラグインを開発する際に変更を簡単に確認できます。 それはあなたがそれをリリースする準備ができているときに使用できる最終的なプラグインファイルを生成します。

    概要

    このトピックでは、次のタスクを実行します。

    ビデオの概要については、以下を参照してください。

    環境の設定

    プラグインジェネレータを実行するように環境を設定するには、次の手順を実行します。

    1. まだダウンロードしていない場合は、ダウンロードしてインストールしてください。 Node.js JavaScriptランタイム。 これには、オープンソースライブラリの大規模なコレクションを含むパッケージエコシステムであるnpmが含まれます。

    2. コンピュータにローカルフォルダを作成します。 この例では、 test。 これは、ジェネレータファイルとあなたのプラグインファイルが行く場所です。

    3. 確認 README の情報 video.jsプラグインジェネレータ。 の中に ドキュメント フォルダを開き、 video.jsプラグインの規約。 このドキュメントでは、プラグインの作成に関する推奨ルールについて説明します。
    4. 前の手順で作成したフォルダのTerminalアプリケーションを開きます。 この例では、 test フォルダにコピーします。
    5. ターミナルアプリケーションで、Yeomanと一緒にプラグインジェネレータをインストールします。

      $ npm install -g yo generator-videojs-plugin

      video.jsプラグインジェネレータはYeomanジェネレータを使用します。Yeomanジェネレータは、あらゆるプロジェクトの基礎をセットアップする足場ツールです。 これにより、基本的なファイルとフォルダが設定されます。 あなたはYeomanを理解する必要はありません。 プラグインジェネレータでインストールするだけです。

    プラグインの基礎を作成する

    このセクションでは、プラグインの基礎フォルダとファイルを作成します。

    1. ターミナルで、次のコマンドを実行します。

      $ yo videojs-plugin
    2. 次に、プラグインの詳細に関する一連の質問が表示されます。 ここにオプションのリストとそれぞれの簡単な説明があります。

      オプション 説明 この例の値
      パッケージのスコープ 各種オプション:これは、プラグインをプライベートnpm組織に公開する予定がある場合にのみ必要です。 ここであなたの会社名を使うこともできますし、空白のままにすることもできます。 ブランク
      プラグイン名 あなたのプラグインに名前をつけてください。 名前を入力する デモ プラグインを作成する videojs-demo. デモ
      説明 プラグインの説明を入力します。 これはデモです
      著者 名前と電子メールアドレスの形式は必須ではありませんが、 著者 内のフィールド package.json ファイル。 ジェネレータはgitの設定に基づいてこれらの値を推測しようとしますが、変更することはできます。 [あなたの名前] <あなたのメールアドレス>
      ライセンス ライセンスオプションの1つを選択します。 プライベートプラグインの場合は、 無免許. 無免許
      基本または高度なプラグイン 基本的な、機能ベースのプラグインは、プレーンなJavaScript関数です。 これまでにVideo.jsプラグインを書いたことがあるなら、基本的なプラグインの概念に慣れているはずです。

      高度なクラスベースのプラグインはVideo.js 6で導入されました。 このプラグインタイプは、コンストラクタ関数であるJavaScriptクラスで始まります。

      詳細については、 Video.jsプラグイン readmeドキュメント
      基本プラグイン(機能ベース)
      CSSツーリング CSSスタイルを含める場合は、「はい」を選択します。 これにより、CSSファイルが生成されます。 はい
      ドキュメンテーションツーリング 存在する場合、ジェネレータはJSDocを含み、ドキュメントを生成するコマンドを提供します。 いいえ
      国際化された文字列 異なる言語に翻訳したいテキストがある場合、これは役に立ちます。 このツールは自動翻訳を提供しませんが、それはvideo.js JSONフォーマットからJavaScriptへファイルを変換します。 それから、video.jsと同じように言語を作成し、それをプラグインの出力にコンパイルすることができます。 いいえ
      変更されたファイルのリント videojs standardというLintingツールを含めます。 このプロセスは、いくつかの一般的なエラーについてあなたのコードをチェックします。 はい
      Git pushの前に これにより、選択したチェックが失敗した場合にgitリポジトリにプッシュするのを防ぐことができます。 コードの品質をチェックすることは、標準に達していないコードをプッシュすることを防ぐための良い方法です。 いいえ

      この例で設定された値を使用した場合の出力結果を次に示します。

      オプション値
      オプション値
    3. セットアップが完了すると、いくつかのメッセージが表示されます。 警告メッセージはありますが、エラーはありません。

      セットアップ完了
      セットアップ完了

      プラグインの名前は videojs-demo.

    ソースファイルを表示する

    このセクションでは、videojsジェネレータによって作成されたソースファイルを確認します。

    1. エディタで、プラグインプロジェクトを置くトップフォルダを開きます。 オープン SRC フォルダ。 ここには次のものがあります:

      • A plugin.js ファイル。 このファイルには、プラグインのコードが含まれています。
      • A plugin.css ファイル、選択した場合 はい CSSツールオプションへ。
    2. (選択しなかった場合 はい CSSツールオプションを使用する場合は、この手順を省略できます。 src> plugin.css ファイル。

      コードは次のようになります。

      /* Note: all vars must be defined here, there are no "local" vars */
        :root {
          --main-color: red;
          --base-font-size: 9;
          --font-size: 7;
        }
      
        .video-js {
      
          &.vjs-demo {
            /* This class is added to the video.js element by the plugin by default. */
            display: block;
      
            & .remove-me, & .remove-me-too, &.finally-remove-me {
              /* examples of postcss syntax, you probably want to remove this */
      
              color: var(--main-color);
      
              /**
               * Note that you have to use calc and multiply by a value with a unit
               * prepending the unit like `var(--base-font-size)px` or
               * `calc(10 * var(--base-font-size)em` will NOT work!
               */
              font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px);
      
            }
          }
        }
    3. Video Cloud Studioで src> plugin.js ファイル。

      コードは次のようになります。

      • 25-27行を呼び出します。 onPlayerReady() 機能、 player 準備ができています。 ここでは、変数をプラグインに渡すことができます options オブジェクト。
      • ライン26: vjs-demo あなたのクラス player。 デフォルトでは、これがスケルトンコードが行う唯一のことです。 これは、プラグインに機能を追加できる場所です。
      • Line 48:プラグインをvideo.jsに登録します。
      • Line 51:プラグインにバージョンパラメータを追加します。 あなたが npmバージョン スクリプトを実行すると、この変数が現在のバージョンに更新されます。
      import videojs from 'video.js';
      import {version as VERSION} from '../package.json';
      
      // Default options for the plugin.
      const defaults = {};
      
      // Cross-compatibility for Video.js 5 and 6.
      const registerPlugin = videojs.registerPlugin || videojs.plugin;
      // const dom = videojs.dom || videojs;
      
      /**
       * Function to invoke when the player is ready.
       *
       * This is a great place for your plugin to initialize itself. When this
       * function is called, the player will have its DOM and child components
       * in place.
       *
       * @function onPlayerReady
       * @param    {Player} player
       *           A Video.js player object.
       *
       * @param    {Object} [options={}]
       *           A plain object containing options for the plugin.
       */
      const onPlayerReady = (player, options) => {
        player.addClass('vjs-demo');
      };
      
      /**
       * A video.js plugin.
       *
       * In the plugin function, the value of `this` is a video.js `Player`
       * instance. You cannot rely on the player being in a "ready" state here,
       * depending on how the plugin is invoked. This may or may not be important
       * to you; if not, remove the wait for "ready"!
       *
       * @function demo
       * @param    {Object} [options={}]
       *           An object of options left to the plugin author to define.
       */
      const demo = function(options) {
        this.ready(() => {
          onPlayerReady(this, videojs.mergeOptions(defaults, options));
        });
      };
      
      // Register the plugin with video.js.
      registerPlugin('demo', demo);
      
      // Include the version number.
      demo.VERSION = VERSION;
      
      export default demo;

    プラグインをテストする

    プラグインジェネレータは、ローカルテスト環境を使用してプラグインの開発とテストを容易にします。 プラグインをテストするには、次の手順に従います。

    1. ターミナルで、次のコマンドを入力して開発サーバーを起動します。

      $ npm start
    2. ブラウザで、次のように入力して開発サーバーを開きます。

      http://localhost:9999/

      あなたは player テストビデオ付き。 ジェネレーターはあなたにデモを与えます player ページで実行されます。 ブラウザ開発者ツールで、 要素 タブを使用して、 player.

      ブラウザテスト
      ブラウザテスト
    3. このWebページの要素を調べます。 あなたは、 vjs-demo クラスが追加されました player。 このクラスを player プラグインコードで。

      vjs-demoクラス
      vjs-demoクラス
    4. 次に、プラグインにコードを追加して、ビデオの再生が自動的に開始されるようにしましょう player 負荷。 に戻る src> plugin.js ファイルを編集します。

    5. の中に onPlayerReady() メソッドを使用して、ビデオの再生を開始するコードを追加します。

      const onPlayerReady = (player, options) => {
        player.addClass('vjs-demo');
        player.play();
      };
    6. を助けて plugin.js ファイルを編集します。 ブラウザを更新すると、テスト環境でビデオの再生が開始されるはずです。

      プラグインを開発する際には、 plugin.js 変更をファイルして保存すると、ツールは自動的に再構築して再ロードします player ブラウザで。 これにより、プラグインの開発とテストが簡単になります。

    7. ビデオの再生を開始するには、コード行を削除します。

      player.play();

    JavaScriptファイルを編集する

    このセクションでは、JavaScriptソースファイルにコードを追加して、カスタムテキストを含む段落要素を player.

    1. エディタで、 src> plugin.js ファイル。
    2. の中に onPlayerReady() 関数を追加するコードを追加する <p> カスタムテキストを含む要素 player.

      const onPlayerReady = (player, options) => {
        player.addClass('vjs-demo');
        var textDisplay = document.createElement('p');
        textDisplay.className = 'vjs-text';
        textDisplay.innerHTML = "Becoming a plugin developer";
        player.el().appendChild(textDisplay);
      };
    3. ファイルを保存します。 変更内容はテストブラウザで自動的に更新されることに注意してください。
    4. テストブラウザに戻ります。 何も変更されていないことがわかります player。 問題は、テキストは存在するが、表示されないことです。 次にそれを修正します。

      テキスト要素がに追加されたことを確認するには player、ブラウザで開発ツールを使用します。 の中に 要素 セクション、展開 player's <div> 素子。 新しく追加された段落タグが表示されます。

      段落タグを追加しました
      段落タグを追加しました

      次のセクションでは、CSSを使用してテキストを表示します。

    CSSファイルを編集する

    このセクションでは、CSSソースファイルにコードを追加して、テキストを player.

    1. エディタで、 src> plugin.css ファイル。
    2. 加えます .vjs-text カスタムテキストを表示するスタイルのセレクタ player.

      /* Note: all vars must be defined here, there are no "local" vars */
        :root {
          --main-color: red;
          --base-font-size: 9;
          --font-size: 7;
        }
      
        .vjs-text {
          background-color: #333333;
          color: white;
          position: absolute;
          font-size: 2em;
          text-align: center;
          width: 100%;
          margin-top: 10%;
        }
    3. ファイルを保存します。 変更内容はテストブラウザで自動的に更新されることに注意してください。
    4. テストブラウザに戻ります。 これで、カスタムテキストが player.

      上に表示されるテキスト player
      上に表示されるテキスト player
    5. 次のようにして開発サーバーを停止します。 CTRL-C ターミナルアプリインチ

      これで、プラグインの配布を準備する準備が整いました。 私たちは次にそれを行います。

    プラグインをビルドする

    このセクションでは、プラグインをビルドします。 これはあなたのソースコードを取り、配布可能なCSSとJavaScriptファイルを作成します。

    1. ターミナルで、次のコマンドを実行します。

      $ npm run build

      ビルドはあなたのES6ソースコードを受け取り、それをES5 JavaScriptコードに変換します。

    2. プロジェクトフォルダで、 DIST フォルダ。 これはあなたがあなたのプラグインの配布可能なバージョンを見つけるところです。 ここでは、次のファイルが見つかります(選択したと仮定します)。 はい CSSツール用)

      • videojs-demo.css
      • videojs-demo.js
      • videojs-demo.min.js

      あなたはまたこれらのそれほど一般的ではないファイルを見つけるでしょう:

      • videojs-demo.cjs.js
        • これは CommonJS あなたのプロジェクトがNodeで必要とされるとき、またはJavaScriptをバンドルするためにBrowserifyを使用している場合に使用されるモジュール。
      • videojs-demo.es.js
        • これは ES6 WebPackまたはRollupを使用してそれらの依存関係をバンドルする最新のプロジェクト用のモジュール。
    3. の中に DIST フォルダを開き、 videojs-demo.js ファイル。

      配布ファイル
      配布ファイル

      このディストリビューションファイルに関する注意点は次のとおりです。

      • ライセンスバナーがファイルの先頭に追加されました。
      • あなたのプラグインは、 ブラウジングする 名前空間。 これは、ページコードと競合する可能性のあるグローバル変数がないことを意味します。
      • プラグインは、内部的に自分自身をvideojsに登録します。 つまり、複数のプラグインを作成し、それぞれが独立して機能することで、 player.

    データをプラグインに渡す

    このセクションはオプションです。 プラグインにデータを渡す方法を知りたい場合を除き、このセクションはスキップできます。

    1. 私たちは options プロパティを使用して、HTMLページからプラグインにデータを渡します。 このプロパティの使用の詳細については、「 データをプラグインに渡す の資料をご参照ください。

    2. エディタで、 src> plugin.js ファイル。

    3. の中に onPlayerReady() 関数内のテキスト値を使用するコードを追加する options プロパティが存在する場合はそれを、それ以外の場合はデフォルトのテキスト値を使用します。

      • 行4:段落要素を作成します
      • 行5:テキストクラスタイプを割り当てます
      • ライン6: displayText オブジェクトは options 財産
      • ライン7: displayText テキスト表示を埋めるための値
      • 行9:デフォルトのテキスト表示値を使用
      • 行13:表示テキスト要素をDOMに追加します
      const onPlayerReady = (player, options) => {
        player.addClass('vjs-demo');
      
        var textDisplay = document.createElement('p');
        textDisplay.className = 'vjs-text';
      
        if ('displayText' in options) {
          textDisplay.innerHTML = options.displayText;
        } else {
          textDisplay.innerHTML = "Becoming a plugin developer";
        }
      
        player.el().appendChild(textDisplay);
      };
    4. ファイルを保存し、テストブラウザに戻ります。 テキスト表示は変更されません。
    5. まだ行っていない場合は、 .vjs-text からのセレクター CSSファイルを編集する の項目を検索します。
    6. プラグインをビルドします。 私たちは、 DIST テストWebページのフォルダ。
    7. MAMPのようなローカルのテストサーバーで、 プラグインジェネレータ.
    8. このフォルダで、 videojs-demo.cssvideojs-demo.js からのファイル DIST フォルダにコピーしてテストサーバーフォルダに貼り付け、 プラグインジェネレータ.
    9. 次に、このフォルダーで、HTMLファイルを作成します。 player それは私たちを呼び出します demo プラグインを開き、表示テキストの値を渡します。 このファイルに名前をつけます testing.html.

      • Line 8:プラグインスタイルを含みます。
      • 13-22行:aを追加する Brightcove Player 私たちのウェブページに。
      • Line 24:プラグインJavaScriptファイルが含まれています。
      • 26-32:カスタムページスクリプトを実行します。
      • 27行目: player 準備する。
      • 28行目:への参照を取得します player.
      • ライン29: options オブジェクト。
      • Line 30:私たちに電話する demo プラグインとパス options オブジェクト。 プラグイン名は demo、プラグインのファイル名は videojs-demo.
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Passing data to the plugin</title>
      
        <link href="videojs-demo.css" rel="stylesheet">
      </head>
      
      <body>
      
        <video-js id="myPlayerID"
          data-video-id="5977793284001"
          data-account="1752604059001"
          data-player="default"
          data-embed="default"
          data-application-id
          class="video-js"
          width="640px" height="360px"
          controls></video-js>
        <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
      
      <script type="text/javascript" src="videojs-demo.js"></script>
      
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this,
            options = {"displayText": "This data supplied at initialization"};
            myPlayer.demo(options);
        });
      </script>
      
      </body>
      </html>
    10. ブラウザで、 testing.html ファイル。 表示テキストの値は、プラグインの代わりにページコードから来ているはずです。

      プラグインに渡されたデータ
      プラグインに渡されたデータ

    提言

    単純なものであっても、あなたのすべてのプラグインにこのジェネレータを使用することをお勧めします。 こうすることで、すべてのプラグインに対して常に同じ設定になります。 また、リンティングや縮小などの特定の機能を実行するためのスクリプトを作成する必要がなくなります。

    このジェネレータを使用すると、基本ツールについて心配することなく、プラグインの開発とテストに集中できます。

    プラグインをローカルに置いたり、プライベートGitHubリポジトリに置くことができます。 videojsプラグインを作成するということは、それが Brightcove Player.

    リソース

    このクイックスタートの作業中に使用するリソースの概要を次に示します。 これらのリンクは、以下の手順でも提供されています。


    ページの最終更新日:28年2020月XNUMX日