ステップ バイ ステップ：プラグイン開発
開発アプローチ
プラグイン用に開発した JavaScript と CSS は、最終的にはインターネットからアクセス可能な場所に配置する必要がありますが、開発中はローカル環境で作成およびテストすることを推奨します。そのために、以下の作業を行います。
- JavaScript プラグイン コードを格納するファイルを作成する
- （必要に応じて）CSS プラグイン コードを格納するファイルを作成する
- テスト用の HTML ファイルを作成する。プレーヤーには
embed_in_page実装を使用します <video-js>タグにidを追加する- JavaScript および CSS ファイルへのリンクを設定する
<script>タグを使用して関数を呼び出す- コードの開発およびデバッグを行う
このドキュメントの残りの部分では、これらの手順に沿って、シンプルなプラグインを構築およびデプロイする方法を説明します。
基本の構築
プラグイン構築のプロセスを開始するには、上記で説明した基礎的な高レベル手順の一部を実行する必要があります。
- 実際の HTTP サーバーを使用して参照できる
plugin-devという名前のフォルダーを作成します。このサーバーは、本ドキュメントの後半で行う iframe 実装のテストに必要です。 - そのフォルダー内に、以下の名前で 3 つのファイルを作成します。
- plugin-dev.html（HTML ページの基本要素をこのファイルに記述します）
- plugin-dev.js
- plugin-dev.css
- Studio の Players モジュールを使用して、新しいプレーヤーを作成します。
- Media モジュールで動画を選択し、新しく作成したプレーヤーを使用して公開します。
- VIDEO CONTENT セクションを使用して、プレーヤーに動画を関連付け、その後プレーヤーを保存して公開します。
- Videoタグ コードをコピーし、
plugin-dev.htmlページの body 内に貼り付けます。 - Embed Code & URL > Published Player メニューから JavaScript Code をコピーし、
plugin-dev.htmlページの body 内に貼り付けます。 <video-js>タグにid属性を追加し、その値をplayerに設定します。- 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="myPlayerID" data-account="1507807800001" data-player="default" data-embed="default" controls="" data-video-id="4607746980001" data-playlist-id="" data-application-id="" width="960" height="540"></video-js> <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script> </body> </html> - ページをブラウズして、動画が正しく再生されることを確認します。
予約済み名称の確認
カスタム プラグインの名前は、プレーヤー自体に組み込まれているプラグイン、または Brightcove が提供するプラグインの名前と一致してはいけません。一致すると競合が発生し、プレーヤーの正常な動作に支障をきたす可能性があります。
-
プラグインに名前を付ける際は、以下の名称を使用しないようにしてください。
- ampSupport
- bcAa
- bcAirplay
- bcAnalytics
- bcGa
- bcGtm
- bcPlaylistUi
- bcTealium
- catalog
- chromecastReceiver
- contextmenu
- contextmenuUI
- customEndscreen
- dock
- eme
- encryptedWatcher
- endscreen
- errors
- FreeWheelPlugin
- ima3
- kollective
- perSourceBehaviors
- pip
- plugin
- playerInfo
- playlist
- playlistEndscreen
- playlistUi
- proxyTracks
- qualityMenu
- reloadSourceOnError
- seekEvents
- social
- ssai
- thumbnails
- touchActive
- urlparams
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 ファイルを読み込み、その中で定義されたメソッドを呼び出します。<script type="text/javascript" src="plugin-dev.js"></script> <script>videojs.getPlayer('myPlayerID').pluginDev();</script> - 再度 HTML ページをブラウズしても、見た目上は何も変わっていないことが確認できます。これは、オーバーレイ自体は存在しているものの、まだ表示されていないためです。この点は後ほど変更します。
- オーバーレイが存在していることを確認するには、ブラウザの開発者ツールを使用します。Elements セクションでプレーヤーの
<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":"This data is supplied at initialization" というキーと値のペアを持つオブジェクトを代入します。また、pluginDev()メソッドを呼び出す際に、引数としてoptions変数を渡します。変更後は次のようになります。<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"} - 設定ダイアログは、次の例と同様に表示されるはずです。
- 保存 をクリックします。
- プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
- 開いているダイアログを閉じるには、閉じる をクリックします。
- Media モジュールで動画を選択し、新しく更新・公開されたプレーヤーを使用して公開します。
- iframe コードをコピーし、
plugin-dev-iframe.htmlページの body 内に貼り付けます。ページは次のようになります。 - Embed Code & URL > Published Player メニューから Standard Embed Code をコピーし、
plugin-dev-iframe.htmlページの body 内に貼り付けます。ページは次のようになります。<!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 allow='encrypted-media'></iframe> </body> </html> - HTML ページをブラウズし、iframe 内でプラグインが正しく動作していることを確認します。
1 ページに複数のプレーヤーがある場合のプラグイン
1 つのページで異なるプレーヤーを使用し、両方のプレーヤーが同じ名前のプラグインを使用しているものの、実際には異なるプラグインである場合、最初に読み込まれたプレーヤーのプラグインのみが使用されます。これは、videojs がグローバル変数であることが原因です。プラグイン名が同じであるため、2 つのプレーヤーは同じバージョンであるかのように扱われ、同一の videojs を共有します。その結果、効率化のためにプレーヤーは 1 つのバージョンのみを読み込みます。つまり、videojs.registerPlugin() を使用して登録された同名のプラグインは、同じバージョンのすべてのプレーヤーで共有されます。
この問題に対する解決策はいくつかあります。
- プラグイン名を異なるものにする。
- Video.js プラグインとして実装せず、一般的なスクリプトとして機能を実装する。
3rd party ライブラリ
プラグインが jQuery などのサードパーティライブラリに依存している場合は、以下のいずれかの方法でそれらを含める必要があります。
- Video Cloud Studio の Players モジュール内にある プラグイン セクションで、追加の JavaScript ファイルとしてライブラリを追加します。
- curl ステートメント内のプレーヤー設定にある scripts セクションに、複数のエントリを追加します。
上記いずれの場合でも、プラグインが依存するライブラリは、必ずプラグインの JavaScript エントリより前に配置してください。記述順は非常に重要です。
Web プレーヤー公開時に発生する可能性のある問題
カスタム プレーヤー プラグインのパッケージ化とデプロイ
公開リクエストを通じて Web プレーヤービルドにカスタムプレーヤー プラグインをパッケージ化およびデプロイするプロセスは複雑になることが多く、Brightcove の Players チームが実施する開発およびテストの範囲を超えた、予測困難なカスタム変数が関与する場合があります。
プラグインあたり 500 万文字という制限は十分に文書化されていますが、プレーヤービルドのワークフローには多くの要因が関係するため、公開時に失敗が発生する可能性があります。失敗の具体的な原因はすぐに特定できない場合もあり、以下のような要因が含まれますが、これらに限定されるものではありません。
含まれているファイル数やリクエスト数。
ダウンロードされるバイト数。
JavaScript の構文エラー。
ネットワーク状況。
Web プレーヤー固有の挙動や仕様。
公開失敗が繰り返される場合の推奨対応
公開失敗が繰り返し発生する場合は、再公開を試みる前に、問題となっているプラグインを適切に評価することを推奨します。例えば、ステージング環境で Web ページレベルにカスタム プラグインを読み込むことで、エラーや実装上の見落としを特定できる場合があります。
ビルド／公開リクエストを簡素化するためのベストプラクティス
より簡素なビルドおよび公開リクエストを実現するために、1 つのプレーヤービルドに多数のプラグインを含める場合や、プラグインを組み合わせた複雑な連携を行う場合には、以下を検討するとよいでしょう。
複数のプラグインを 1 つの JavaScript リソースまたはファイルにまとめ、単一プラグインの文字数制限を超えないようにする。
プレーヤービルドに含めるパッケージ化されたプラグインを慎重に検討し、必要に応じて一部またはすべてのプレーヤー プラグインを実行時に読み込むことを選択する。