反應播放器載入器

在本主題中，您將學習如何使用React Player加載程序在瀏覽器中作為React組件加載Brightcove Player。

概覽

React Player加載程序庫為更多技術客戶提供了將Brightcove Player與React Web應用程序集成的能力。該庫定義了一個React組件，用於在瀏覽器中加載Brightcove Player。有關完整的詳細信息，請參見Brightcove /反應播放器加載器 GitHub上的存儲庫。

React是一個用於構建交互式用戶界面的JavaScript庫。當數據更改時，它會更新並渲染您的組件。要了解更多信息，請訪問反應主頁。

播放器範例

開始播放視頻以查看在Brightcove Player中播放的指定視頻。查看代碼以查看React組件是如何實現的。

看筆與Brightcove Player反應通過Brightcove學習服務（ @ bcls1969）上密碼筆。

使用編碼器

以下是一些有效使用上述 CodePen 的提示：

按一下「結果」按鈕，切換播放器的實際顯示。
按一下 HTML/CSS/JS 按鈕以顯示其中一種程式碼類型。
在本文件後面，應用程序中使用的邏輯，流程和樣式將在播放器 /HTML 配置，應用程序流程和應用程序樣式部分中討論。跟著這些章節中的資訊一起遵循的最佳方式是：
1. 點擊編輯 CODEPEN 上 CODEPEN 按鈕，並在一個瀏覽器/瀏覽器選項卡中提供的代碼。
2. 在 CodePen 中，調整您要顯示的程式碼。您可以在 CodePen 中變更不同的程式碼區段的寬度。
3. 在其他瀏覽器/瀏覽器選項卡中查看播放器 /HTML 配置，應用程序流程和/或應用程序樣式部分。您現在可以遵循程式碼說明，並同時檢視程式碼。

安裝

該庫使用 NPM 安裝，使用以下內容：

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

包括圖書館

包括@brightcove/react-player-loader網站或Web應用程序的庫中，您可以使用GitHub回購。上面的CodePen中的示例使用<script>標籤方法。

播放器/HTML 配置

您為此範例建立的 Brightcove 播放程式不需要特殊設定。

在HTML代碼中，包括<script>以下精簡JavaScript文件的標籤：

React庫。
React-DOM庫。該包用作與DOM相關的渲染路徑的入口點。它打算與React庫一起使用。

此範例僅供示範用途。對於您的 React Web 應用程序，您很可能會使用 webpack 來捆綁依賴關係，而不是直接使用 ReactDom。
Brightcove React Player加載程序庫。

接下來，添加一個<div>用一個標記id屬性。這是React將渲染Brightcove Player的位置。

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

應用程式流程

這個應用程序背後的基本邏輯是：

取得所需程式庫的參考
將布萊特灣播放器添加到 HTML 頁面

取得所需程式庫的參考

獲取對React，React-DOM和Brightcove Player Loader庫的引用。

將布萊特灣播放器添加到 HTML 頁面

找到標記的代碼：

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

使用ReactDOM.render()方法與React.createElement()將Brightcove Player添加到HTML頁面的方法。

此示例使用以下參數播放來自指定帳戶的視頻：

accountId
videoId

請注意，如果playerId參數不包括在內。

有關可用參數的列表，請參見參量本文檔的第二部分。

應用程式樣式

CSS樣式用於確定Brightcove Player的大小。

參數

有關可與Brightcove Player加載程序一起使用的可用參數的列表，請參見播放器加載器概述文件。列出的所有參數均可與React Player加載程序一起使用，但以下情況除外：

您需要使用onSuccess和onFailure回調，因為promise不能輕易導出。
如果您不提供onFailure回調，將通過引發錯誤來處理失敗。
的refNode和refNodeInsert參數不能與React Player加載程序一起使用，因為它們在內部使用。
使用baseUrl參數以更改基本URL。Brightcove Player加載程序使用setBaseUrl()方法來執行此操作，但是React Player加載程序無權使用此方法。

內嵌播放

的playsinline屬性告訴播放器在元素的播放區域內播放視頻。由於React Player加載程序不支持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 Player Loader，您需要做的就是獲取對播放器的引用並將 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);
                    // Get a reference to the BC Player
                    var myPlayer = success.ref;
                    // When ready...
                    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>