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

    ステップバイステップ:プラグイン開発

    このトピックでは、プラグインの開発と使用についての実践的な紹介を通して学習します。

    開発アプローチ

    プラグイン用に開発したJavaScriptとCSSは、最終的にはインターネットにアクセス可能な場所に保存する必要がありますが、開発中はローカルで作成してテストすることをお勧めします。 これを行うには、以下を実行します。

    • JavaScriptプラグインコードを含むファイルを作成する
    • CSSプラグインコードを含むファイルを作成する(必要な場合)
    • テスト用のHTMLファイルを作成します。 使用 embed_in_page の実装 player
    • 追加する id <video-js> タグ
    • JavaScriptページとCSSページへのリンク
    • 使用 <script> 関数を呼び出すためのタグ
    • コードの開発とデバッグ

    このドキュメントの残りの部分では、シンプルなプラグインをビルドおよびデプロイするための手順について説明します。

    基礎を構築する

    プラグイン構築のプロセスを開始するには、上で述べた基本的な高水準の手順のいくつかを実行する必要があります。

    1. 名前付きのフォルダを作成する plugin-dev 実際のHTTPサーバーを使用してブラウズすることができます。 このドキュメントの後半で、iframe実装のテストにサーバーが必要です。
    2. フォルダ内に、次の名前の3つのファイルを作成します。
      • plugin-dev.html (HTMLページの基本要素をファイルに挿入する)
      • プラグイン-dev.js
      • プラグイン-dev.css
    3. 使い方 Studio's Players の作成と管理 モジュール、新しい player.
    4. の中に メディア モジュール、ビデオを選択し、新しく作成した player.
    5. 使い方 ビデオコンテンツ セクション、ビデオを player、次に保存して公開します player.
    6. コピー 高度な コードと本文に貼り付ける plugin-dev.html のページをご覧ください。
    7. から 埋め込みコードとURL>公開 Player メニュー、コピー 高度な埋め込みコード コードと本文に貼り付ける plugin-dev.html のページをご覧ください。
    8. 追加する id 属性を <video-js> 値を持つタグ player.
    9. HTMLページが次のように表示されていることを確認してください (Brightcove Player 顧客は data-video-id プロパティ):
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Quick Start Plugin Dev</title>
      </head>
      
      <body>
        <video-js id="player"
          data-video-id="4607746980001"
          data-account="1507807800001"
          data-player="Bk6LLayNQ"
          data-embed="default"
          class="video-js" controls></video>
        <script src="https://players.brightcove.net/1507807800001/Bk6LLayNQ_default/index.min.js"></script>
      </body>
      
      </html>
    10. ビデオが再生されていることを確認するページを参照してください。

    JavaScriptを作成する

    次に、JavaScriptコードを作成してテストし、ビデオのオーバーレイを作成します。

    1. ファイルをオープンする plugin-dev.js 次のJavaScriptコードに貼り付けます:
      videojs.registerPlugin('pluginDev', function() {
        var player = this,
        overlay = document.createElement('p');
        overlay.className = 'vjs-overlay';
        overlay.innerHTML = "Becoming a plugin developer";
        player.el().appendChild(overlay);
      });
    2. 挿入された各行の理解を確認してください:
      • 1行目と7行目は、新しい構文を開始および終了するための標準構文です player プラグイン。 この場合、プラグイン名は pluginDev.
      • 2行目は、ハンドルを取得する標準的な方法です。 player。 これは、 player、後で行います。
      • 3行は、文書内に段落要素を作成し、段落要素を overlay 変数。
      • ライン4は、後にCSSと共に使用されるオーバーレイにクラスを割り当てます。
      • 5行は、段落要素にテキストを追加します。
      • ライン6は el() の方法 player 取得する playerのDOM要素の場合、そのDOMに新しい段落要素を追加します。
    3. HTMLファイルで、既存のコードのすぐ下に次のコードを追加します <script> タグ。 このコードはJavaScriptファイルを含み、そのJavaScriptで定義されたメソッドを呼び出します。
      <script type="text/javascript" src="plugin-dev.js"></script>
      <script>videojs.getPlayer('myPlayerID').pluginDev();</script>
    4. HTMLページを再度参照すると、変更されたものは表示されません。 問題は、オーバーレイが存在するが表示されないことです。 後でこれを変更します。
    5. オーバーレイが存在することを確認するには、ブラウザの開発ツールを使用します。 の中に 要素 セクションで、 player's <div> 次のように新しく挿入された段落要素が表示されます。
      要素のクイックスタートオーバーレイ

    プラグインのスタイルを設定する

    オーバーレイは現在、 player、しかし見えない。 次に、オーバーレイが表示されるようにスタイルを設定します。 ドキュメントのこのセクションでは、非常にシンプルなCSSを使用して、オーバーレイが表示されるようにします。

    1. ファイルをオープンする plugin-dev.css 次のスタイルで貼り付けます:
      .vjs-overlay {
          background-color: #333333;
          color: white;
          position: absolute;
          margin-top: 100px;
          margin-left: 20px;
      }
    2. HTMLファイルで、既存のコードのすぐ下に次のコードを追加します <link> タグ。 このコードは、新しく作成されたCSSファイルにリンクします。
      <link href="plugin-dev.css" rel="stylesheet">
    3. HTMLページを参照すると、オーバーレイが表示されます。
      クイックスタートオーバーレイ表示

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

    初期化時にプラグインの動作を変更したいことがよくあります。 これは、データをプラグインに渡すことによって可能です。 options プロパティ。 この例では、オーバーレイに表示するテキストを渡します。

    1. HTMLページを開き、 <script> タグを付けて、名前の付いた変数 options キーと値のペアを持つオブジェクトが作成され、割り当てられます。 "overlayText": "このデータは初期化時に供給されます"。 また、 options 引数を呼び出すときの変数 pluginDev() 方法。 変更は次のように表示されます。
      <script type="text/javascript" src="plugin-dev-copy.js"></script>
      <script type="text/javascript">
        var options = {"overlayText": "This data supplied at initialization"};
      </script>
      <script>videojs.getPlayer('myPlayerID').pluginDev(options);</script>
    2. 関数に渡されるデータを使用するには、プラグインのJavaScriptを変更する必要があります。 110行はデータをパラメータとして受け取る関数を示し、114行はオブジェクトのデータを使用します。
      videojs.registerPlugin('pluginDev', function(options) {
        var player = this,
        overlay = document.createElement('p');
        overlay.className = 'vjs-overlay';
        overlay.innerHTML = options.overlayText;
        player.el().appendChild(overlay);
      });
    3. HTMLページを参照すると、使用されている新しいテキストが表示されます。
      クイックスタートオプションの表示

    プラグインをデプロイする

    プラグイン、CSS、 player 正しく機能するには、適切に使用するためにアセットをデプロイする必要があります。 展開に必要な手順の概要は次のとおりです。

    • JavaScriptファイルとCSSファイルをリモートロケーションにコピー/移動する
    • Linuxを使う Studio プラグイン設定を player.
    • テスト用のHTMLファイルを作成し、iframe実装を使用して player
    • 異常のテスト

    これで、これらの手順をガイドします。

    1. あなたのプラグインのJavaScriptとCSSファイルをあなたが選択したインターネットアクセス可能な場所に移動します。
    2. あなたが作業しているフォルダで、別のファイルを作成します。 plugin-dev-iframe.html.
    3. Linuxを使う Studio's Players の作成と管理 編集するモジュール player あなたは以前に作成しました。
    4. ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
    5. 次にクリック プラグインを追加する.
    6.   プラグイン名 入力します pluginDev.
    7.   JavaScriptを URL、入力する(またはあなたのURL):
       https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.js
    8.   CSS URL、入力する(またはあなたのURL):
       https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.css
    9. 構成オプションを オプション(JSON) テキストボックス。
       {"overlayText": "This data is supplied at initialization"}
    10. 設定ダイアログは次のようになります。
      プラグインダイアログ
    11. ナビゲーションヘッダーの 保存.
    12. 公開するには player、クリック 公開と埋め込み>変更の公開.
    13. 開いているダイアログを閉じるには、 閉じる.
    14. の中に メディア モジュール、ビデオを選択し、新しく更新されて公開された状態で公開します player.
    15. コピー スタンダード コードと本文に貼り付ける plugin-dev-iframe.html ページ。 ページは次のように表示されます。
    16. から 埋め込みコードとURL>公開 Player メニュー、コピー 標準埋め込みコード コードと本文に貼り付ける plugin-dev-iframe.html ページ。 ページは次のように表示されます。
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Quick Start Plugin Dev - iframe</title>
      </head>
      
      <body>
          <iframe src='https://players.brightcove.net/1507807800001/Bk6LLayNQ_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
      </body>
      
      </html>
    17. HTMLページを参照すると、プラグインがiframeで正しく機能しているはずです。

    3rdパーティライブラリ

    あなたのプラグインが3rdパーティライブラリ(例えばjQuery)に依存している場合は、次のいずれかの方法でそれらをインクルードする必要があります:

    • 別のJavaScriptファイルとしてライブラリを プラグイン のセクション Players の作成と管理 のモジュール Video Cloud Studio.
    • 複数のエントリを スクリプト のセクション player curlステートメントの構成。

    上記の両方のシナリオで、プラグインのJavaScriptエントリの前に、プラグインが依存するライブラリを配置することを確認してください。 エントリーの順序は重要です。


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