Resumen
La biblioteca React Player Loader ofrece a los clientes más técnicos la capacidad de integrar su Brightcove Player con una aplicación web React. Esta biblioteca define un componente de React para cargar Brightcove Player en el navegador. Para obtener detalles completos, consulte el brightcove / react-player-loader repositorio en GitHub.
React es una biblioteca de JavaScript para crear interfaces de usuario interactivas. Actualiza y procesa sus componentes cuando cambian sus datos. Para obtener más información al respecto, visite el Reaccionar página de inicio.
Ejemplo de jugador
Inicie la reproducción de video para ver la reproducción de video especificada en un Brightcove Player. Revise el código para ver cómo se implementa el componente React.
Ver la pluma Reaccionar con Brightcove Player por Brightcove Learning Services ( bcls1969 ) en CodePen.
Uso de CodePen
Instalación
La biblioteca se instala mediante NPM, utilizando lo siguiente:
npm install --save @brightcove/react-player-loader
Incluyendo la biblioteca
Para incluir el @brightcove/react-player-loader biblioteca para su sitio web o aplicación web, puede utilizar cualquiera de los métodos que se muestran en la Repositorio de GitHub. El ejemplo en CodePen anterior usa el <script> Método de etiquetas.
Configuración de reproductor/HTML
No se requiere ninguna configuración especial para el reproductor de Brightcove que crea para este ejemplo.
En el código HTML, incluya <script> etiquetas para los siguientes archivos JavaScript minificados:
- La biblioteca React.
-
La biblioteca React-DOM. Este paquete se utiliza como punto de entrada para las rutas de renderización relacionadas con DOM. Está diseñado para usarse con la biblioteca React.
- La biblioteca Brightcove React Player Loader.
A continuación, incluya un <div> etiqueta con un id atributo. Esta es la ubicación donde React procesará su Brightcove Player.
<div id='container'></div>
Flujo de aplicaciones
La lógica básica detrás de esta aplicación es:
- Obtenga una referencia a las bibliotecas necesarias
- Agregar Brightcove Player a la página HTML
Obtenga una referencia a las bibliotecas necesarias
Obtenga una referencia a las bibliotecas React, React-DOM y Brightcove Player Loader.
Agregar Brightcove Player a la página HTML
Busque el código etiquetado:
// +++ Add the Brightcove Player +++
Utilizar el ReactDOM.render() método junto con el React.createElement() método para agregar Brightcove Player a la página HTML.
Esta muestra utiliza los siguientes parámetros para reproducir un video de la cuenta especificada:
accountIdvideoId
Tenga en cuenta que Player Loader utiliza su reproductor predeterminado si el playerId el parámetro no está incluido.
Para obtener una lista de los parámetros disponibles, consulte la Parámetros sección de este documento.
Estilismo de aplicaciones
Los estilos CSS se utilizan para cambiar el tamaño del Brightcove Player.
Parámetros
Para obtener una lista de los parámetros disponibles que se pueden utilizar con Brightcove Player Loader, consulte la Descripción general de Player Loader documento. Todos los parámetros enumerados se pueden usar con React Player Loader, excepto lo siguiente:
- Necesitas usar el
onSuccessyonFailuredevoluciones de llamada, ya que las promesas no se pueden exportar fácilmente. - Si no proporciona el
onFailuredevolución de llamada, la falla se manejará arrojando un error. - La
refNodeyrefNodeInsertLos parámetros no se pueden usar con React Player Loader ya que se usan internamente. - Utilizar el
baseUrlparámetro para cambiar la URL base. Brightcove Player Loader utiliza elsetBaseUrl()método para hacer esto, pero React Player Loader no tiene acceso a este método.
Reproducción en línea
La playsinline El atributo le dice al jugador que reproduzca video dentro del área de reproducción del elemento. Debido a que React Player Loader no es compatible con playsinline atributo, puede usar cURL para configurar esto en el reproductor. He aquí un ejemplo:
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
Uso de restricciones de reproducción
Para usar las restricciones de reproducción con React Player Loader, todo lo que necesita hacer es obtener una referencia al reproductor y pasarle el JSON Web Token (JWT).
He aquí un ejemplo:
<!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>