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

    プレーヤを作成する

    この例では、アカウント情報を入力します。また、メディアへの URL とメディアタイプ、または Video Cloud 動画 ID を入力します。ボタンをクリックすると、プレーヤーが作成され、表示されるプレーヤーに関する情報が選択されます。

    免責条項

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

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

    1. プレイヤーの作成に必要なユーザーデータを収集する
    2. JSON データ構造を構築し、プレーヤー作成用の API に渡す
    3. ボタンのクリックで、AJAX呼び出しを実行してプレーヤーを作成します
    4. AJAX呼び出しが成功した場合は、以下を実行します。
      • JSON レスポンスデータを HTML ページに注入する
      • 関数を呼び出してプレーヤーを公開する
    5. AJAX呼び出しを実行してプレイヤーを公開する
    6. AJAX呼び出しが成功した場合は、以下を実行します。
      • JSON 応答データを HTML に挿入する
      • 選択したプレーヤー情報を表示するHTMLを動的に構築し、それをHTMLページに注入する

    サンプルアプリ

    ソースコード

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

    サンプルアプリ

    CodePen の Brightcove ラーニングサービス ( @rcrooks1969 ) のペン作成プレーヤーを参照してください

    CodePen を使用する

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

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

    プロキシコード

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