Brightcove Playerサンプル：キオスクアプリ

プレーヤーの例

プレーヤーは、ビデオオブジェクトの配列からビデオを無限ループで再生します。

ペンを見る18186-キオスク-アプリ Brightcove Learning Services（ @ rcrooks1969） オンCodePen。

ソースコード

GitHubで完全なソリューションを表示します。

API/プラグインリソースを使用

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

このサンプル用に作成した Brightcove Player には、特別な設定は必要ありません。

その他のHTML

他の HTML 要素はページに追加されません。

アプリケーションフロー

このアプリケーションの背後にある基本的なロジックは次のとおりです。

• 使用CMS APIターゲットアカウントの動画の総数を取得します。
• 一度に25本以下のビデオの情報を取得することがベストプラクティスであるため（ CMS APIビデオオブジェクトを返しませんが、ビデオに関する情報を返します）、合計数から必要な呼び出しの数を計算します。
• 25 ビデオの情報を取得するには、ID を抽出し、Video Cloud カタログを使用してビデオオブジェクトを取得します。
• すべてのビデオオブジェクトが返されたら、最初のビデオを再生します。
• ビデオが終了したら、次のビデオを再生します。
• 最後のビデオが再生されたら、リストの先頭からもう一度開始します。

詳細については、こに追加されています。 description:

1. に電話をかける準備をしますCMS APIアカウント内の動画の総数を返します。
2. を使用して実際のリクエストを行いますCMS APIカウントのために。このステップでは、コールバック関数を使用します。つまり、コールバック関数がパラメータとして別の 2 番目の関数に渡されます。コールバック関数は、2 番目の関数のロジック内で呼び出されます。この場合、コールバック関数は、CMS API によって返されたオブジェクトから count プロパティを抽出するだけです。
3. に必要な呼び出しの数を決定しますCMS APIすべてのビデオを取得します。このコードは、コールごとに 25 本のビデオを要求するベストプラクティスに従います。これは、すべての動画の数を25で割ることによって行われます。
4. do-while前のステップで決定した必要なコール数に対して反復するループを作成します。このループは、ビデオカウントのリクエストのコールバック関数内になければなりません。
5. ループで、を呼び出す準備をしますCMS APIアカウントから25本の動画が返されます。
6. まだループ内で、を使用して実際のリクエストを行いますCMS APIビデオデータ用。このステップでは、コールバック関数を使用します。つまり、コールバック関数がパラメータとして別の 2 番目の関数に渡されます。コールバック関数は、2 番目の関数のロジック内で呼び出されます。この場合、コールバック関数は次のタスクを実行します。
   • データを抽出して、返されたビデオ情報のビデオ ID の配列を作成します。
   • ビデオ ID の配列は、各 ID の完全なビデオオブジェクトを取得する別の関数にパラメーターとして渡されます。返されるオブジェクトは、すべてのビデオオブジェクトの配列に格納されます。このステップでは、コールバック関数も使用されます。
   • すべての動画が返されるタイミングを確認します（返された動画の数が以前に返された数と一致する場合）。条件が満たされたら、配列の最初のビデオ（ゼロ番目の要素）を再生する関数を呼び出します。
7. endedイベントをリッスンするイベントリスナーを設定します。各ビデオが終了すると、次のビデオが再生されます。配列の最後のビデオの場合は、最初のビデオを再生します。

CMS API から動画数をリクエストする

ラベルが付いたコードを見つけます。

	// ### Setup for video count CMS API request ###

getCMSAPIData()への最初の呼び出しは、ビデオの総数です。コールバック関数には、do-whileループ内の関数への別の呼び出しがあることに注意してください。

再生中のビデオの最後に次のビデオを再生する

ラベルが付いたコードを見つけます。

	// ### Get next video ###

on('ended',...)ロジックを使用して、リスト内の次のビデオを再生します。currentlyPlayingIndexビデオを再生しているトラックに注意してください。

CMS API を使用してデータを取得する

ラベルが付いたコードを見つけます。

	// ### Standard functionality for CSM API call ###

これは、学習ガイドで説明されている標準コードです。REST API ドキュメントを使用します。

ビデオ ID の抽出とビデオオブジェクトの取得

ラベルが付いたコードを見つけます。

	// ### Extract video IDs ###

この一連の関数は、返されたビデオ情報を取得し、IDを抽出してから、 CMS APIプレーヤーが実際にビデオコンテンツを再生するために必要なビデオオブジェクトを取得します。

アプリケーションのスタイリング

唯一のCSSはプレーヤーのサイズを設定します。

プラグインコード

通常、JavaScript を Brightcove Player プラグインに変換する場合は、公称の変更が必要です。必要な変更の 1 つは、ready()メソッドの標準使用をプラグインを定義するコードに置き換えることです。

ここでは、プレーヤーで動作するJavaScriptコードへの非常に一般的に使用されるスタートです：

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

最初の行を変更して、標準の構文を使用して Brightcove Player プラグインを起動します。

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});   

前述のように、このドキュメントの対応する GitHub レポ: kiosk-app.js には、プラグインの JavaScript コードが表示されます。

プレーヤーでプラグインを使用する

プラグインの CSS ファイルと JavaScript ファイルをインターネットでアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERSモジュールでは、プレーヤーを選択し、[ プラグイン ] セクションで CSS ファイルと JavaScript ファイルに URL を追加し、名前を追加することもできます。オプションが必要な場合は、[Options] と [Options]

プロキシコード

このページのサンプルアプリを独自のバージョンで作成するには、独自のプロキシを作成してホストする必要があります。（Brightcoveラーニングサービスで使用されるプロキシは、Brightcoveのドメインからのリクエストのみを受け付けます）。サンプルプロキシは、使用するものとよく似ていますが、BrightCove 以外のドメインからのリクエストをブロックするチェックがないと、この GitHub リポジトリにあります。また、そこで使用するための基本的な手順と、プロキシを使用してアプリケーションを構築するためのより詳細なガイドについては、「REST API の使用」を参照してください。