サポート問い合わせ先| システムステータス
ページコンテンツ

    ディスプレイプレーヤー

    この例では、アカウントのユーザー名、ID、およびパスワードを入力します。ボタンをクリックすると、HTMLの順不同リストにはアカウントプレーヤーが表示されます。プレイヤーごとに、プレイヤーID、名前、作成日が表示されます。

    概要

    このサンプルアプリのアーキテクチャに関する一般的なアプローチ、特に認証と AJAX の実装については、 HttpRequest の使用例を参照してください

    アプリケーションのアーキテクチャ

    このアプリの高レベルのアプリケーションロジックは次のとおりです。

    1. アカウントにアクセスするために必要なユーザーデータを収集する
    2. ボタンのクリックで、AJAX呼び出しを実行してすべてのプレーヤー情報を取得する
    3. AJAX呼び出しが成功した場合は、以下を実行します。
      • JSON レスポンスデータを HTML ページに注入する
      • プレーヤー情報を順序付けられたリストに表示し、それをHTMLページに注入するHTMLを動的に構築する

    サンプルアプリ

    ソースコード

    このサンプルに関連付けられているすべてのコードを、この GitHub リポジトリで検索します

    サンプルアプリ

    ペンを見るディスプレイプレーヤー Brightcove Learning Services( @ rcrooks1969) オンCodePen

    CodePen を使用する

    上記のCodePenを効果的に使用するためのヒントは次のとおりです。

    • [ 結果 ] ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JS ボタンをクリックして、コードタイプの 1 つを表示します。
    • 右上隅にある CodePen の編集をクリックして、この CodePen を自分のアカウントにフォークします。
    • このサンプルに関連付けられているすべてのコードを、この GitHub リポジトリで検索します

    プロキシコード

    このページのサンプルアプリを独自のバージョンで作成するには、独自のプロキシを作成してホストする必要があります。(Brightcoveラーニングサービスで使用されるプロキシは、Brightcoveのドメインからのリクエストのみを受け付けます)。サンプルプロキシは、私たちが使用しているものと非常に似ていますが、BrightCove 以外のドメインからのリクエストをブロックするチェックがないサンプルプロキシは、この GitHub リポジトリにあります。また、そこで使用するための基本的な手順と、 REST API の使用で説明されているプロキシの周りにアプリを構築するためのより精巧なガイドがあります。


    ページの最終更新日22 Sep 2021