概要
このサンプルアプリケーションのアーキテクチャに関する一般的なアプローチ、特に認証とAJAXの実装については、 HTTPRequestを使用する例.
アプリケーションアーキテクチャ
このアプリのハイレベルアプリケーションロジックは次のとおりです:
- アカウントにアクセスするために必要なユーザーデータを収集する
- ボタンをクリックすると、AJAX呼び出しを実行してすべてを取得します player info
- AJAXコール成功時には、次の処理を実行します。
- HTMLページにJSON応答データを挿入する
- 表示するHTMLを動的に構築する player 順序付きリストの情報とそれをHTMLページに挿入する
サンプルアプリケーション
ソースコード
このサンプルに関連付けられているすべてのコードを このGitHubリポジトリ.
サンプルアプリケーション
ペンを見る ディスプレイ Players ブライトコーブラーニングサービス(@rcrooks1969)上 コードペン.
CodePenの使用
上記のCodePenを効果的に使用するためのヒントをいくつか紹介します。
- プレーヤーの実際の表示を切り替えるには、 Result ボタン。
- ストリーミングを停止する場合は上部の HTML / CSS / JS ボタンを押して、1つのコードタイプを表示します。
- ナビゲーションヘッダーの CodePenで編集 右上隅にあるこのCodePenを自分のアカウントにフォークします。
- このサンプルに関連付けられているすべてのコードをこれで見つけます GitHubリポジトリ.
プロキシコード
このページのサンプルアプリで独自のバージョンを構築するには、独自のプロキシを作成してホストする必要があります。 (Brightcoveラーニングサービスで使用されるプロキシは、Brightcoveドメインからの要求のみを受け入れます。)サンプルプロキシは、使用するものと非常に似ていますが、Brightcove以外のドメインからの要求をブロックするチェックがない場合は、次の場所にあります。 このGitHubリポジトリ。 また、そこでの使用のための基本的な手順や、プロキシの周囲にアプリケーションを構築するためのより詳細なガイドが含まれています。 REST APIの使用.