Überblick
Die React Player Loader-Bibliothek bietet mehr technischen Kunden die Möglichkeit, ihren Brightcove Player in eine React-Webanwendung zu integrieren. Diese Bibliothek definiert eine React-Komponente zum Laden des Brightcove-Players in den Browser. Ausführliche Informationen finden Sie in der Brightcove / React-Player-Loader Repository auf GitHub.
React ist eine JavaScript-Bibliothek zum Erstellen interaktiver Benutzeroberflächen. Es aktualisiert und rendert Ihre Komponenten, wenn sich Ihre Daten ändern. Um mehr darüber zu erfahren, besuchen Sie die Startseite reagieren.
Beispiel eines Spielers
Starten Sie die Videowiedergabe, um das angegebene Video in einem Brightcove-Player abzuspielen. Überprüfen Sie den Code, um festzustellen, wie die React-Komponente implementiert ist.
Siehe den Stift Reagiere mit Brightcove Player von Brightcove Learning Services ( bcls1969 ) auf CodePen.
CodePen verwenden
Installation
Die Bibliothek wird mit NPM installiert, wobei Folgendes verwendet wird:
npm install --save @brightcove/react-player-loader
Einschließlich der Bibliothek
Um die einzuschließen @brightcove/react-player-loader Bibliothek für Ihre Website oder Webanwendung können Sie eine der in der GitHub Repo. Das Beispiel im obigen CodePen verwendet die <script> Tags Methode.
Player-/HTML-Konfiguration
Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.
Fügen Sie im HTML-Code ein <script> Tags für die folgenden minimierten JavaScript-Dateien:
- Die React-Bibliothek.
-
Die React-DOM-Bibliothek. Dieses Paket wird als Einstiegspunkt für DOM-bezogene Rendering-Pfade verwendet. Es ist für die Verwendung mit der React-Bibliothek vorgesehen.
- Die Brightcove React Player Loader-Bibliothek.
Als nächstes fügen Sie ein <div> Tag mit einem id Attribut. Dies ist der Ort, an dem Ihr Brightcove-Player von React gerendert wird.
<div id='container'></div>
Ablauf der Anwendung
Die grundlegende Logik hinter dieser Anwendung lautet:
- Holen Sie sich einen Verweis auf benötigte Bibliotheken
- Fügen Sie den Brightcove Player zur HTML-Seite hinzu
Holen Sie sich einen Verweis auf benötigte Bibliotheken
Holen Sie sich einen Verweis auf React, React-DOM und die Brightcove Player Loader-Bibliotheken.
Fügen Sie den Brightcove Player zur HTML-Seite hinzu
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Add the Brightcove Player +++
Verwenden Sie die ReactDOM.render() Methode in Verbindung mit der React.createElement() Methode zum Hinzufügen des Brightcove-Players zur HTML-Seite.
In diesem Beispiel werden die folgenden Parameter verwendet, um ein Video von dem angegebenen Konto abzuspielen:
accountIdvideoId
Beachten Sie, dass der Player Loader Ihren Standardplayer verwendet, wenn der playerId Parameter ist nicht enthalten.
Eine Liste der verfügbaren Parameter finden Sie in der Parameter Abschnitt dieses Dokuments.
Styling der Anwendung
CSS-Stile werden verwendet, um die Größe des Brightcove-Players zu bestimmen.
Parameter
Eine Liste der verfügbaren Parameter, die mit dem Brightcove Player Loader verwendet werden können, finden Sie in der Player Loader Übersicht Dokument. Alle aufgeführten Parameter können mit dem React Player Loader verwendet werden, außer wie folgt:
- Sie müssen die verwenden
onSuccessundonFailureRückrufe, da Versprechen nicht einfach exportiert werden können. - Wenn Sie die nicht zur Verfügung stellen
onFailureRückruf, Fehler wird durch Auslösen eines Fehlers behoben. - Das
refNodeundrefNodeInsertParameter können mit dem React Player Loader nicht verwendet werden, da sie intern verwendet werden. - Verwenden Sie die
baseUrlParameter zum Ändern der Basis-URL. Der Brightcove Player Loader verwendet diesetBaseUrl()Methode, um dies zu tun, aber der React Player Loader hat keinen Zugriff auf diese Methode.
Inline-Wiedergabe
Das playsinline Das Attribut weist den Player an, Videos im Wiedergabebereich des Elements abzuspielen. Weil React Player Loader das nicht unterstützt playsinline Attribut können Sie cURL verwenden, um dies im Player zu konfigurieren. Hier ist ein Beispiel:
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
Verwendung von Wiedergabebeschränkungen
Um die Wiedergabeeinschränkungen mit dem React Player Loader zu verwenden, müssen Sie lediglich einen Verweis auf den Player abrufen und das JSON-Web-Token (JWT) an diesen übergeben.
Hier ist ein Beispiel:
<!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>