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

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

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コンポーネントがどのように実装されているかを確認してください。

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
JavaScript

図書館を含む

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>
JavaScript

アプリケーションフロー

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

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

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

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

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

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

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

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
Bash
ページの最終更新日04 Sep 2022
×