サポートに連絡する| システムステータス
ページコンテンツ

    プレイヤーローダーを反応させる

    In this topic, you will learn how to use the React Player Loader to load a Brightcove Player in the browser as a React component.

    概要

    React Player Loader ライブラリを使用すると、より多くの技術のお客様に、ブライトコーブ Player を React ウェブアプリケーションと統合できます。このライブラリは、ブラウザに Brightcove Player をロードするための Reactコンポーネントを定義します。詳細については、GitHub のbrightcove/react-player-loaderリポジトリを参照してください。

    反応は、インタラクティブなユーザーインターフェイスを構築するためのJavaScriptライブラリです。データが変更されると、コンポーネントが更新され、レンダリングされます。詳細については、 Reactホームページ

    プレーヤーの例

    ビデオの再生を開始して、指定された動画を Brightcove Player で再生しているかどうかを確認します。コードを確認して、Reactコンポーネントがどのように実装されているかを確認してください。

    ペンを見るBrightcovePlayerと反応する Brightcove Learning Services( @ bcls1969) オンCodePen

    CodePen を使用する

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

    • [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JS ボタンをクリックして、コードタイプの 1 つを表示します。
    • この文書の後半で、アプリケーションで使用されるロジック、フロー、およびスタイリングについては、 Player/HTML 設定アプリケーションフロー、およびアプリケーションのスタイリングで説明しますセクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
      1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
      3. を見るプレーヤー/ HTML構成アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。

    インストール

    ライブラリは NPM を使用してインストールされます。次の方法を使用します。

    npm install --save @brightcove/react-player-loader

    図書館を含む

    Web サイトまたは Web @brightcove/react-player-loaderアプリケーションのライブラリを含めるには、 GitHub リポジトリに表示されているいずれかの方法を使用できます。上記の CodePen のサンプルでは、<script> Tags メソッドを使用しています。

    プレーヤー/HTML構成

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

    HTML コードには、次の縮小された JavaScript <script>ファイルのタグを含めます。

    • リアクションライブラリ。
    • リアクトDOMライブラリ。このパッケージは、DOM 関連のレンダリングパスのエントリポイントとして使用されます。Reactライブラリで使用することを目的としています。

    • Brightcove React PlayerLoaderライブラリ。

    次に、<div>id属性を持つタグを含めます。ReactによってBrightcove Playerがレンダリングされる場所です。

    <div id='container'></div>

    アプリケーションフロー

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

    • 必要なライブラリへの参照を取得する
    • Brightcove Playerを HTML ページに追加する

    必要なライブラリへの参照を取得する

    Reactライブラリ、React-DOM、および Brightcove プレーヤーローダーライブラリへの参照を取得します。

    Brightcove Playerを HTML ページに追加する

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

    // +++ Add the Brightcove Player +++

    ReactDOM.render()メソッドをメソッドと組み合わせて使用して、Brightcove Playerを HTML ページに追加します。React.createElement()

    このサンプルでは、次のパラメーターを使用して、指定されたアカウントから動画を再生します。

    • accountId
    • videoId

    playerIdパラメーターが含まれていない場合、Player Loader はデフォルトのプレーヤーを使用することに注意してください。

    使用可能なパラメータのリストについては、このドキュメントの「パラメータ」セクションを参照してください。

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

    CSS スタイルは、Brightcove Playerのサイズを設定するために使用されます。

    パラメータ

    Brightcove Player Loaderで使用できる使用可能なパラメーターのリストについては、を参照してください。プレーヤーローダーの概要資料。以下の場合を除き、リストされているすべてのパラメーターをリアクトプレーヤーローダーで使用できます。

    • promise は簡単にエクスポートできないため、onSuccessonFailureコールバックとコールバックを使用する必要があります。
    • onFailureコールバックを指定しない場合、エラーはエラーをスローすることによって処理されます。
    • refNoderefNodeInsertパラメータとパラメータは、内部的に使用されるため、Reactプレーヤーローダーでは使用できません。
    • baseUrlパラメーターを使用して、ベース URL を変更します。Brightcove setBaseUrl()プレーヤーローダーはメソッドを使用してこれを実行しますが、React Player ローダーはこのメソッドにアクセスできません。

    インライン再生

    playsinline属性は、要素の再生領域内でビデオを再生するようにプレーヤーに指示します。React Player Loader playsinlineは属性をサポートしていないため、cURL を使用してこれをプレーヤーで設定できます。ここに例があります:

    curl \
    --header "Content-Type: application/json" \
    --user EMAIL_ADDRESS \
    --request PATCH \
    --data '{
          "playsinline": true
    }' \
    https://players.api.brightcove.com/v2/accounts/ACCOUNT_ID/players/default/configuration

    ページの最終更新日04 Sep 2022