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

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

    In this topic you will learn via a hands-on introduction about plugin development and use.

    開発アプローチ

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

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

    このドキュメントの残りの部分では、簡単なプラグインを構築してデプロイする手順を説明します。

    基本を構築する

    プラグインの構築プロセスを開始するには、上記の基本的な、高レベルの手順の一部を実行する必要があります。

    1. 実際の HTTP plugin-devサーバを使用して参照できるという名前のフォルダを作成します。サーバは、このドキュメントの後半の iframe 実装テストに必要です。
    2. このフォルダーに、次の名前の3つのファイルを作成します。
      • plugin-dev.html (HTML ページの基本要素をファイルに挿入します)
      • plugin-dev.js
      • plugin-dev.css
    3. Studio の Playersモジュールを使用して、新しいプレーヤーを作成します。
    4. メディアモジュールで、ビデオを選択し、新しく作成したプレーヤーで公開します。
    5. [ VIDEO CONTENT ] セクションを使用して、ビデオをプレーヤーに関連付けて、プレーヤーを保存して公開します。
    6. 詳細コードをコピーして、plugin-dev.htmlページの本文に貼り付けます。
    7. [ 埋め込みコードと URL] > [公開済みプレーヤー ] メニューから、[ 高度な埋め込みコード] コードをコピーして、plugin-dev.htmlページ。
    8. 追加しますidに属性<video-js>の値を持つタグplayer。
    9. HTML ページが次のような表示されていることを確認します（data-video-idBrightcove Playerのお客様にはプロパティがありません）。 
      <!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 行目は新しいプレーヤープラグインの開始と終了の標準的な構文です。この場合、プラグイン名はですpluginDev。
      • ライン2は、プレイヤーにハンドルを取得する方法を持つ標準的な方法です。これは、後で行うプレーヤーのメソッドを呼び出すために必要です。
      • 3 行目では、文書内に段落エレメントが作成され、overlay変数に割り当てられます。
      • 4行目では、後でCSSと組み合わせて使用されるオーバーレイにクラスを割り当てます。
      • 5 行目では、段落エレメントにテキストが追加されます。
      • 6行目はel()プレーヤーの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. オーバーレイが存在することを確認するには、ブラウザの開発ツールを使用します。の中に エレメント セクションで、<div>プレイヤーの要素をチェックすると、次に示すように、新しく挿入された段落要素が表示されます。
      quick-start-overlay-in-elements

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

    オーバーレイがプレーヤーの一部になりますが、表示されません。次に、オーバーレイが表示されるようにスタイルを設定します。このドキュメントのこのセクションでは、オーバーレイが表示されるように非常に単純な 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ページを参照すると、オーバーレイが表示されていることがわかります。
      quick-start-overlay-showing

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

    多くの場合、初期化時にプラグインの動作を変更したい場合があります。これは、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ページを参照すると、使用されている新しいテキストが表示されます。
      quick-start-options-showing

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

    プラグイン、CSS、プレーヤーが正常に機能したら、適切に使用するためにアセットを展開する必要があります。ここでは、展開に必要な手順の概要を示します。

    • JavaScript および CSS ファイルをリモートロケーションにコピー/移動する
    • Studio を使用して、プラグイン設定をプレーヤーに追加します。
    • テスト用のHTMLファイルを作成し、プレーヤー用のiframe実装を使用する
    • 異常のテスト

    これで、これらの手順を案内します。

    1. プラグインのJavaScriptファイルとCSSファイルを、インターネットでアクセス可能な任意の場所に移動します。
    2. 作業しているフォルダに、という別のファイルを作成しますplugin-dev-iframe.html。
    3. Studio の Playersモジュールを使用して、前に作成したプレーヤーを編集します。
    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. 構成ダイアログは次のように表示されます。
      Plugins dialog
    11. [ 保存] をクリックします。
    12. プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
    13. 開いているダイアログを閉じるには、[ 閉じる] をクリックします。
    14. メディアモジュールで、ビデオを選択し、新しく更新および公開したプレーヤーで公開します。
    15. 標準コードをコピーして、plugin-dev-iframe.htmlページの本文に貼り付けます。ページは次のように表示されます。
    16. [ 埋め込みコードと URL] > [公開済みプレーヤー ] メニューから、[ 標準埋め込みコード] コードをコピーして、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 で正常に機能していることがわかります。

    サードパーティライブラリ

    プラグインがサードパーティのライブラリ（jQueryなど）に依存している場合は、次の2つの方法のいずれかにそれらを含める必要があります。

    • ライブラリを別のJavaScriptファイルとしてプラグインのセクションプレイヤーのモジュールビデオクラウドスタジオ。
    • に複数のエントリを追加しますスクリプト curlステートメントのプレーヤー構成のセクション。

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

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