概要
React プレーヤー ローダー ライブラリは、より技術志向のユーザーが Brightcove Player を React Web アプリケーションに統合できるようにします。このライブラリは、ブラウザーで Brightcove Player を読み込むための React コンポーネントを定義します。詳細については、GitHub の brightcove/react-player-loader リポジトリを参照してください。
React は、インタラクティブなユーザーインターフェースを構築するための JavaScript ライブラリです。データが変更されると、コンポーネントを更新および再描画します。詳細については、React の公式サイトを参照してください。
プレーヤーの例
動画の再生を開始すると、指定された動画が Brightcove Player で再生されます。コードを確認して、React コンポーネントがどのように実装されているかを確認してください。
See the Pen React with Brightcove Player by Brightcove Learning Services (@bcls1969) on CodePen.
CodePen の使用方法
インストール
このライブラリは、以下のコマンドを使用して NPM でインストールします。
npm install --save @brightcove/react-player-loader
ライブラリの読み込み
Web サイトまたは Web アプリケーションで @brightcove/react-player-loader ライブラリを読み込むには、GitHub リポジトリ に記載されているいずれかの方法を使用できます。上記の CodePen サンプルでは、<script> タグを使用する方法が採用されています。
プレーヤー／HTML の設定
このサンプルで使用する Brightcove Player には、特別な設定は必要ありません。
HTML コード内で、以下の圧縮済み JavaScript ファイルを <script> タグで読み込みます。
- React ライブラリ。
-
React-DOM ライブラリ。このパッケージは、DOM 関連のレンダリング処理のエントリー ポイントとして使用され、React ライブラリと組み合わせて利用することを目的としています。
- Brightcove React プレーヤー ローダー ライブラリ。
次に、id 属性を持つ <div> タグを追加します。ここが、React によって Brightcove Player が描画される場所になります。
<div id='container'></div>
アプリケーションのフロー
このアプリケーションの基本的なロジックは次のとおりです。
- 必要なライブラリへの参照を取得する
- Brightcove Player を HTML ページに追加する
必要なライブラリへの参照を取得する
React、React-DOM、および Brightcove プレーヤー ローダー ライブラリへの参照を取得します。
Brightcove Player を HTML ページに追加する
次のラベルが付いたコードを探します。
// +++ Add the Brightcove Player +++
ReactDOM.render() メソッドを React.createElement() メソッドと組み合わせて使用し、Brightcove Player を HTML ページに追加します。
このサンプルでは、指定したアカウントから動画を再生するために、次のパラメータを使用しています。
accountIdvideoId
playerId パラメータが指定されていない場合、プレーヤー ローダーはデフォルトのプレーヤーを使用する点に注意してください。
使用可能なパラメータの一覧については、本ドキュメントの Parameters セクションを参照してください。
アプリケーションのスタイリング
Brightcove Player のサイズ調整には、CSS スタイルを使用します。
パラメータ
Brightcove プレーヤー ローダーで使用できるパラメータの一覧については、プレーヤー ローダーの概要 ドキュメントを参照してください。記載されているパラメータは、次の場合を除き、すべて React プレーヤー ローダーで使用できます。
- Promise を簡単にエクスポートできないため、
onSuccessおよびonFailureコールバックを使用する必要があります。 onFailureコールバックを指定しない場合、失敗時はエラーがスローされることで処理されます。refNodeおよびrefNodeInsertパラメータは内部的に使用されているため、React プレーヤー ローダーでは使用できません。- ベース URL を変更するには
baseUrlパラメータを使用します。Brightcove プレーヤー ローダーではsetBaseUrl()メソッドを使用しますが、React プレーヤー ローダーからはこのメソッドにアクセスできません。 onEmbedCreatedパラメータを使用すると、埋め込み要素（video-js要素またはiframe要素）を DOM に挿入する前、またはembedOptionsによるカスタマイズが行われる前、かつプレーヤーがダウンロードおよび初期化される前に、その要素をカスタマイズできます。このコールバック内で埋め込み要素を変更することも、要素を返すことでその要素を埋め込み要素として使用することも可能です。主なユースケースとしては、属性や子要素の追加・削除、バンパーの追加などがあります。
インライン再生
playsinline 属性は、要素の再生領域内で動画を再生するようプレーヤーに指示します。React プレーヤー ローダーは 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
再生制限の使用
React プレーヤー ローダーで 再生制限 を使用するには、プレーヤーへの参照を取得し、JSON Web Token（JWT）を渡すだけで実現できます。
以下に例を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brightcove Player</title>
<meta charset="UTF-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin
src="brightcove-player/reactjs/brightcove-react-player-loader.min.js"></script>
</head>
<body>
<main>
<h1>Brightcove Player</h1>
<div id='container'></div>
</main>
</body>
<script>
var React = window.React;
var ReactDOM = window.ReactDOM;
var ReactPlayerLoader = window.BrightcoveReactPlayerLoader;
var myJwtToken = "your jwt token";
var myVideoId = "your video Id";
// +++ Add the Brightcove Player +++
var reactPlayerLoader = window.reactPlayerLoader = ReactDOM.render(
React.createElement(ReactPlayerLoader, {
accountId: 'your account Id',
onSuccess: function (success) {
console.log(reactPlayerLoader.player);
// BC プレーヤーへの参照を取得
var myPlayer = success.ref;
// 準備完了後に処理
myPlayer.ready(function () {
myPlayer.catalog.get({
id: myVideoId,
type: 'video',
bcovAuthToken: myJwtToken
}).
then(function (data) {
myPlayer.catalog.load(data);
myPlayer.muted(true);
myPlayer.play();
}).
catch(function (error) {
throw new Error(error);
});
});
}
}),
document.getElementById('container')
);
</script>
</html>