ステップバイステップ:プラグイン開発
開発アプローチ
プラグイン用に開発する JavaScript と CSS は、最終的にインターネットにアクセスできる場所に保存する必要がありますが、開発時にはローカルで作成してテストすることをお勧めします。これを行うには、次の操作を実行します。
- JavaScript プラグインコードを含むファイルを作成する
- CSS プラグインコードを含むファイルを作成します (必要な場合)
- テスト用の HTML ファイルを作成します。
embed_in_page
プレーヤー用の実装を使用する id
<video-js>
タグにを追加します- JavaScript および CSS ページへのリンク
<script>
タグを使用して関数を呼び出します- コードの開発とデバッグ
このドキュメントの残りの部分では、簡単なプラグインを構築してデプロイする手順を説明します。
基本を構築する
プラグインの構築プロセスを開始するには、上記の基本的な、高レベルの手順の一部を実行する必要があります。
- 実際の HTTP
plugin-dev
サーバを使用して参照できるという名前のフォルダを作成します。サーバは、このドキュメントの後半の iframe 実装テストに必要です。 - このフォルダーに、次の名前の3つのファイルを作成します。
- plugin-dev.html (HTML ページの基本要素をファイルに挿入します)
- plugin-dev.js
- plugin-dev.css
- Studio の Playersモジュールを使用して、新しいプレーヤーを作成します。
- メディアモジュールで、ビデオを選択し、新しく作成したプレーヤーで公開します。
- [ VIDEO CONTENT ] セクションを使用して、ビデオをプレーヤーに関連付けて、プレーヤーを保存して公開します。
- 詳細コードをコピーして、
plugin-dev.html
ページの本文に貼り付けます。 - [ 埋め込みコードと URL] > [公開済みプレーヤー ] メニューから、[ 高度な埋め込みコード] コードをコピーして、
plugin-dev.html
ページ。 - 追加します
id
に属性<video-js>
の値を持つタグplayer
。 - HTML ページが次のような表示されていることを確認します(
data-video-id
Brightcove 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>
- ページを参照して、ビデオが再生されていることを確認します。
JavaScriptを作成する
次に、JavaScript コードを作成してテストし、ビデオのオーバーレイを作成します。
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); });
- 挿入された各行の理解を確認してください。
- 1 行目と 7 行目は新しいプレーヤープラグインの開始と終了の標準的な構文です。この場合、プラグイン名はです
pluginDev
。 - ライン2は、プレイヤーにハンドルを取得する方法を持つ標準的な方法です。これは、後で行うプレーヤーのメソッドを呼び出すために必要です。
- 3 行目では、文書内に段落エレメントが作成され、
overlay
変数に割り当てられます。 - 4行目では、後でCSSと組み合わせて使用されるオーバーレイにクラスを割り当てます。
- 5 行目では、段落エレメントにテキストが追加されます。
- 6行目は
el()
プレーヤーのDOM要素を取得するプレーヤーのメソッド。次に、新しい段落要素をそのDOMに追加します。
- 1 行目と 7 行目は新しいプレーヤープラグインの開始と終了の標準的な構文です。この場合、プラグイン名はです
- HTML ファイルで、
<script>
既存のタグのすぐ下に次のコードを追加します。このコードには JavaScript ファイルが含まれており、その JavaScript で定義されているメソッドを呼び出します。<script type="text/javascript" src="plugin-dev.js"></script> <script>videojs.getPlayer('myPlayerID').pluginDev();</script>
- HTML ページをもう一度参照すると、何も変更されていないことがわかります。問題は、オーバーレイがあるが目に見えないことです。これは後で変更します。
- オーバーレイが存在することを確認するには、ブラウザの開発ツールを使用します。の中に エレメント セクションで、
<div>
プレイヤーの要素をチェックすると、次に示すように、新しく挿入された段落要素が表示されます。
プラグインのスタイルを設定する
オーバーレイがプレーヤーの一部になりますが、表示されません。次に、オーバーレイが表示されるようにスタイルを設定します。このドキュメントのこのセクションでは、オーバーレイが表示されるように非常に単純な CSS を使用します。
plugin-dev.css
ファイルを開き、次のスタイルで貼り付けます。.vjs-overlay { background-color: #333333; color: white; position: absolute; margin-top: 100px; margin-left: 20px; }
- HTML ファイルで、
<link>
既存のタグのすぐ下に次のコードを追加します。このコードは、新しく作成された CSS ファイルにリンクします。<link href="plugin-dev.css" rel="stylesheet">
- HTMLページを参照すると、オーバーレイが表示されていることがわかります。
プラグインにデータを渡す
多くの場合、初期化時にプラグインの動作を変更したい場合があります。これは、options
プロパティを使用してプラグインにデータを渡すことで可能です。この例では、オーバーレイに表示されるテキストを渡します。
- 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>
- 関数に渡されたデータを使用するには、プラグインの 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); });
- HTMLページを参照すると、使用されている新しいテキストが表示されます。
プラグインをデプロイする
プラグイン、CSS、プレーヤーが正常に機能したら、適切に使用するためにアセットを展開する必要があります。ここでは、展開に必要な手順の概要を示します。
- JavaScript および CSS ファイルをリモートロケーションにコピー/移動する
- Studio を使用して、プラグイン設定をプレーヤーに追加します。
- テスト用のHTMLファイルを作成し、プレーヤー用のiframe実装を使用する
- 異常のテスト
これで、これらの手順を案内します。
- プラグインのJavaScriptファイルとCSSファイルを、インターネットでアクセス可能な任意の場所に移動します。
- 作業しているフォルダに、という別のファイルを作成します
plugin-dev-iframe.html
。 - Studio の Playersモジュールを使用して、前に作成したプレーヤーを編集します。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- 次に、プラグインを追加 > カスタムプラグインをクリックします。
- [ プラグイン名 ] に、と入力します
pluginDev
。 - JavaScript の URL には、(または自分の URL)を入力します。
https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.js
- CSS の URL には、(または URL)を入力します。
https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.css
- [ オプション (JSON)] テキストボックスに構成オプションを入力します。
{"overlayText": "This data is supplied at initialization"}
- 構成ダイアログは次のように表示されます。
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開いているダイアログを閉じるには、[ 閉じる] をクリックします。
- メディアモジュールで、ビデオを選択し、新しく更新および公開したプレーヤーで公開します。
- 標準コードをコピーして、
plugin-dev-iframe.html
ページの本文に貼り付けます。ページは次のように表示されます。 - [ 埋め込みコードと 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>
- HTML ページを参照すると、プラグインが iframe で正常に機能していることがわかります。
サードパーティライブラリ
プラグインがサードパーティのライブラリ(jQueryなど)に依存している場合は、次の2つの方法のいずれかにそれらを含める必要があります。
- ライブラリを別のJavaScriptファイルとしてプラグインのセクションプレイヤーのモジュールビデオクラウドスタジオ。
- に複数のエントリを追加しますスクリプト curlステートメントのプレーヤー構成のセクション。
上記の両方のシナリオで、プラグインが依存しているライブラリをプラグインのJavaScriptエントリの前に配置するようにしてください。エントリの順序は重要です。