サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    反応する Player ローダー

    このトピックでは、Reactの使用方法を学びます Player ローダーをロードする Brightcove Player Reactコンポーネントとしてブラウザに表示されます。

    概要

    反応 Player ローダーライブラリは、より技術的なお客様に、 Brightcove Player Reactウェブアプリケーションで このライブラリは、 Brightcove Player ブラウザに表示されます。 詳細については、 brightcove / react-player-ローダ GitHubのリポジトリ

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

    Player 例

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

    ペンを見る 反応する Brightcove Player by Brightcove ラーニングサービス(@bcls1969)上 コードペン.

    CodePenの使用

    上記のCodePenを効果的に使用するためのヒントをいくつか紹介します。

    • プレーヤーの実際の表示を切り替えるには、 Result ボタン。
    • ストリーミングを停止する場合は上部の HTML / CSS / JS ボタンを押して、1つのコードタイプを表示します。
    • このドキュメントの後半で、アプリケーションで使用されるロジック、フロー、およびスタイリングについては、 Player/ HTML設定, アプリケーションフローアプリケーションスタイリング セクション。 これらのセクションの情報に従う最善の方法は次のとおりです。
      1. ストリーミングを停止する場合は上部の EDIT ON CODEPEN CodePenのボタンをクリックして、XNUMXつのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePenで、表示するコードを調整します。 CodePen内のさまざまなコードセクションの幅を変更できます。
      3. 表示 Player/ HTML設定, アプリケーションフロー および アプリケーションスタイリング 別のブラウザ/ブラウザタブのセクション コードの説明に従うと同時にコードを見ることができるようになります。

    インストール

    ライブラリは、以下を使用してNPMを使用してインストールされます。

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

    図書館を含む

    を含めるには @brightcove/react-player-loader WebサイトまたはWebアプリケーション用のライブラリを使用している場合は、 GitHubレポ。 上記のCodePenのサンプルでは、 <script> タグメソッド。

    Player/ HTML設定

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

    HTMLコードでは、 <script> 次の縮小されたJavaScriptファイルのタグ:

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

    • Brightcove 反応する Player ローダーライブラリ。

    次に、 <div> タグに id 属性。 これはあなたの Brightcove Player Reactによってレンダリングされます。

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

    アプリケーションフロー

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

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

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

    React、React-DOMへの参照を取得する Brightcove Player ローダーライブラリ。

    加えます Brightcove Player HTMLページへ

    以下のラベルが付いたコードを探します:

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

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

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

    • accountId
    • videoId

    なお、 Player ローダーはデフォルトを使用します player もし playerId パラメータは含まれません。

    使用可能なパラメータのリストについては、 パラメーター このドキュメントのセクション

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

    CSSスタイルは、 Brightcove Player.

    パラメーター

    使用可能なパラメータのリストについては、 Brightcove Player ローダー、を参照してください Player ローダーの概要 資料。 リストされているすべてのパラメーターは、R​​eactで使用できます。 Player ローダー(以下を除く):

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

    インライン再生

    playsinline 属性は、 player 要素の再生領域内でビデオを再生します。 反応するので Player ローダーは、 playsinline 属性、cURLを使用して、これを player。 次に例を示します。

    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

    ページの最終更新日:28年2020月XNUMX日