ディスプレイ Players

この例では、アカウントのユーザー名、ID、パスワードを入力します。ボタンをクリックすると、HTML順不同リストにアカウントが表示されます players。それぞれについて player インクルード player ID、氏名、作成日が表示されます。

概要

このサンプルアプリケーションのアーキテクチャに関する一般的なアプローチ、特に認証と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の使用.