React Player Loader

Aperçu

La bibliothèque React Player Loader offre aux clients plus techniques la possibilité d'intégrer leur Brightcove Player à une application Web React. Cette bibliothèque définit un composant React pour charger le Brightcove Player dans le navigateur. Pour plus de détails, consultez le brightcove / react-player-loader référentiel sur GitHub.

React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur interactives. Il met à jour et rend vos composants lorsque vos données changent. Pour en savoir plus, visitez le Page d'accueil de React.

Exemple de lecteur

Démarrez la lecture vidéo pour voir la vidéo spécifiée jouer dans un Brightcove Player. Examinez le code pour voir comment le composant React est implémenté.

Voir le stylo Réagissez avec Brightcove Player par Brightcove Learning Services ( bcls1969 ) sur CodePen.

Utilisation du CodePen

Installation

La bibliothèque est installée à l'aide de NPM, à l'aide des éléments suivants :

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

Y compris la bibliothèque

Pour inclure le @brightcove/react-player-loader bibliothèque pour votre site Web ou votre application Web, vous pouvez utiliser l'une des méthodes indiquées dans le Dépôt GitHub. L'exemple dans le CodePen ci-dessus utilise le <script> Méthode des balises.

Configuration du lecteur/HTML

Aucune configuration spéciale n'est requise pour le lecteur Brightcove que vous créez pour cet exemple.

Dans le code HTML, incluez <script> balises pour les fichiers JavaScript minifiés suivants:

• La bibliothèque React.

• La bibliothèque React-DOM. Ce package est utilisé comme point d'entrée pour les chemins de rendu liés au DOM. Il est destiné à être utilisé avec la bibliothèque React.

• La bibliothèque Brightcove React Player Loader.

Ensuite, incluez un <div> tag avec un id attribut. Il s'agit de l'emplacement où votre lecteur Brightcove sera rendu par React.

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

Flux d'application

La logique de base derrière cette application est la suivante :

• Obtenir une référence aux bibliothèques nécessaires
• Ajouter le lecteur Brightcove à la page HTML

Obtenir une référence aux bibliothèques nécessaires

Obtenez une référence aux bibliothèques React, React-DOM et Brightcove Player Loader.

Ajouter le lecteur Brightcove à la page HTML

Trouvez le code étiqueté :

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

Utilisez le ReactDOM.render() méthode en conjonction avec la React.createElement() méthode pour ajouter le Brightcove Player à la page HTML.

Cet exemple utilise les paramètres suivants pour lire une vidéo à partir du compte spécifié:

• accountId
• videoId

Notez que Player Loader utilise votre lecteur par défaut si le playerId le paramètre n'est pas inclus.

Pour une liste des paramètres disponibles, reportez-vous au Paramètres section de ce document.

Style d'application

Les styles CSS sont utilisés pour dimensionner le Brightcove Player.

Paramètres

Pour obtenir la liste des paramètres disponibles pouvant être utilisés avec le Brightcove Player Loader, consultez le Présentation de Player Loader document. Tous les paramètres répertoriés peuvent être utilisés avec le React Player Loader, à l'exception de ce qui suit:

• Vous devez utiliser le onSuccess et onFailure les rappels, car les promesses ne peuvent pas être exportées facilement.
• Si vous ne fournissez pas le onFailure callback, l'échec sera traité en lançant une erreur.
• le refNode et refNodeInsert Les paramètres ne peuvent pas être utilisés avec React Player Loader car ils sont utilisés en interne.
• Utilisez le baseUrl paramètre pour modifier l'URL de base. Brightcove Player Loader utilise le setBaseUrl() pour ce faire, mais le React Player Loader n'a pas accès à cette méthode.

Lecture en ligne

le playsinline L'attribut indique au lecteur de lire la vidéo dans la zone de lecture de l'élément. Parce que React Player Loader ne prend pas en charge playsinline attribut, vous pouvez utiliser cURL pour le configurer dans le lecteur. Voici un exemple :

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

Utilisation des restrictions de lecture

Pour utiliser les restrictions de lecture avec le chargeur de lecteur React, il suffit d'obtenir une référence au lecteur et de lui transmettre le jeton Web JSON (JWT).

Voici un exemple :

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