Cargador de reproductores Brightcove

En este tema, aprenderá a usar Brightcove Player Loader para cargar Brightcove Player utilizando herramientas de construcción modernas. Esta biblioteca se considera una herramienta para clientes más técnicos.

Descripción general del cargador de jugadores

Para los usuarios de Brightcove Player que no deseen copiar y pegar las implementaciones de reproductor de iframe o de incrustación en la página, este módulo está incluido en su aplicación web y proporciona una forma de utilizar Brightcove Players sin necesidad de escribir un código de integración para descargar su jugadores e incrustarlos. Esta herramienta resuelve el problema con una biblioteca de Brightcove que puede descargar cualquier Brightcove Player publicado e incrustarlo en el DOM.

Esta biblioteca es compatible con los navegadores habituales de siempre, Chrome, Firefox, Edge y Safari.

Básicamente, este documento proporciona ejemplos de usos de Brightcove Player Loader. Para obtener detalles completos, consulte la biblioteca brightcove / player-loader Repositorio de GitHub.

Hay un paquete web que se puede utilizar con Brightcove Player. Los detalles para eso se pueden encontrar en el player-loader-webpack-plugin Repositorio de GitHub.

Instalación

La biblioteca se instala mediante NPM, utilizando lo siguiente:

npm install --save @brightcove/player-loader

Incluyendo la biblioteca

Para conocer los diferentes métodos de incluir la biblioteca para su uso, consulte el Repositorio de GitHub para la biblioteca.

Implementación usando una promesa

Puedes usar un Promesa de JavaScript con la biblioteca. No se requieren promesas para que esta biblioteca funcione, pero se recomiendan. De forma predeterminada, esta biblioteca buscará una Promesa global. Sin embargo, puede proporcionar explícitamente una implementación de Promise a través del Promise parámetro, que se detalla más adelante en este documento.

A continuación se muestra una implementación de la biblioteca usando una Promesa. Un concepto clave es que obtienes una referencia al jugador usando var myPlayer = success.ref; en el then sección de manejo de la promesa:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
    brightcovePlayerLoader({
      refNode: document.querySelector('#theDiv'),
      accountId: '1752604059001',
      playerId: 'wHBRh9M3o',
      videoId: '4607357817001'
    })
    .then(function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    })
    .catch(function(error) {
      console.log('error', error);
    })
  </script>

</body>

</html>

Implementación mediante devoluciones de llamada

También puede implementar el cargador de reproductores utilizando devoluciones de llamada a través de la onSuccess y onFailure funciones de devolución de llamada.

A continuación, se muestra una implementación de la biblioteca mediante devoluciones de llamada. Un concepto clave es que obtienes una referencia al jugador usando var myPlayer = success.ref; en el onSuccess función de devolución de llamada:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
  brightcovePlayerLoader({
    refNode: document.querySelector('#theDiv'),
    accountId: '1752604059001',
    playerId: 'wHBRh9M3o',
    videoId: '4607357817001',
    onSuccess: function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    },
    onFailure(error) {
      console.log('error', error);
    }
  });
  </script>

</body>

</html>

Uso de restricciones de reproducción

Para usar las Restricciones de reproducción con Brightcove 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="player-loader/dist/brightcove-player-loader.min.js"></script>
      </head>
      
      <body>
          <main>
              <h1>Brightcove Player</h1>
              <div id="theDiv"></div>
      
          </main>
      </body>
      <script>
          var myJwtToken = "your jwt token";
          var myVideoId = "your video Id";
      
          // +++ Add the Brightcove Player +++
          brightcovePlayerLoader({
              refNode: document.querySelector('#theDiv'),
              accountId: 'your account Id',
              playerId: 'your player Id',
            onSuccess: function (success) {
              // Get a reference to the BC Player
              var myPlayer = success.ref;
              console.log('success', success);
              
              myPlayer.ready(function () {
                // This should ideally be set in the player configuration
                myPlayer.catalog.setPolicyKey(null);
                myPlayer.catalog.setBcovAuthToken(myJwtToken);
                myPlayer.catalog.get({
                  id: myVideoId,
                  type: 'video'
              }).
                  then(function (data) {
                    myPlayer.catalog.load(data);
                    myPlayer.muted(true);
                    myPlayer.play();
                  }).
                  catch(function (error) {
                    throw new Error(error);
                  });
              });
            },
            onFailure(error) {
              console.log('error', error);
            }
          });
    </script>
    </html>

Parámetros disponibles

Nombre: accountId

Tipo de datos: cadena | number

Descripción:
Un ID de cuenta de Video Cloud.

Nombre: applicationId

Tipo de datos: cadena

Descripción:
El ID de la aplicación que se aplicará a la inserción generada.

Nombre: catalogSearch

Tipo de datos: cadena | Objeto

Descripción:
Se debe realizar una búsqueda en el catálogo de Video Cloud. Puede ser una búsqueda de cadena simple o un objeto que coincida con el Catalogar getSearch() método. Si se proporciona un valor sin cadena que no es serializable como JSON, este parámetro se ignorará.

Nombre: catalogSequence

Tipo de datos: Array | Objeto

Descripción:
Una secuencia de Video Cloud Catalog para realizar. Ver el Catalogar getLazySequence() método para más información. Si se proporciona un valor sin cadena que no es serializable como JSON, este parámetro se ignorará.

Nombre: embedId

Tipo de datos:cuerda

Descripción:
El ID de incrustación de Brightcove Player para el reproductor. El valor predeterminado es 'default'. El valor predeterminado es correcto para la mayoría de los usuarios.

Nombre: embedOptions

Tipo de datos: Objeto

Descripción:
Se utiliza para proporcionar determinadas opciones para la generación de incrustaciones. Éstas incluyen:

`embedOptions.pip`	booleano	Si `true` , envolverá la inserción en un `<div class="vjs-pip-container">` elemento. Esto debe usarse cuando necesite soporte para el Complemento Brightcove Picture-in-Picture. El valor predeterminado es `false`.
`embedOptions.playlist`	booleano	Si `true` , agregará un `<div class="vjs-playlist">` elemento después de la inserción. Esto debe usarse cuando necesite soporte para el Complemento de interfaz de usuario de lista de reproducción de Brightcove. El valor predeterminado es `false`.
`embedOptions.responsive`	booleano \| Objeto	Se usa para personalizar el código de inserción para producir un reproductor de tamaño receptivo usando el intrinsic ratio enfoque de envoltura. Cuando es verdadero, producirá un código de inserción receptivo con una relación de aspecto de 16: 9 que llenará su contenedor. El valor predeterminado es `false`. Se puede proporcionar un objeto para personalizarlo con las siguientes subpropiedades: `aspectRatio`: Una cadena que se utiliza para personalizar la relación de aspecto a un valor que no sea 16: 9 (p. Ej., '4: 3'). `maxWidth`: Una cuerda que se usa para restringir el ancho máximo del jugador. Esto debería usar unidades CSS, como píxeles (por ejemplo, '960px').
`embedOptions.unminified`	booleano	Si `true` , utilizará la versión no minificada del reproductor. Esto puede ser útil para fines de depuración, pero tiene el costo de una descarga de reproductor más grande. ¡No recomendado para producción! El valor predeterminado es `false`.

Nombre: embedType

Tipo de datos: cadena

Descripción:
El tipo de código de inserción que se va a producir. El valor de este parámetro debe ser uno de los siguientes:

'in-page' o brightcovePlayerLoader.EMBED_TYPE_IN_PAGE: También conocido como código de inserción avanzado, inyecta al reproductor directamente en la página web de nivel superior.
'iframe' o brightcovePlayerLoader.EMBED_TYPE_IFRAME: También conocido como el código de inserción básico, inyecta al reproductor como un elemento <iframe>.

El valor predeterminado es 'in-page'.

Nombre: onEmbedCreated

Tipo de datos: Función (elemento)

Descripción:
Una devolución de llamada utilizada para personalizar el elemento incrustado (ya sea video-js elemento o un iframe elemento) antes de que se inserte en el DOM o se personalice como resultado de embedOptions y antes de que el reproductor se descargue e inicialice. El elemento incrustado puede estar mutado o, si esta devolución de llamada devuelve un elemento, ese elemento se utilizará como elemento incrustado. Los casos de uso potenciales son agregar / eliminar atributos o agregar elementos secundarios, como fuentes o pistas.

Nombre: onFailure

Tipo de datos: Función (error)

Descripción:
Una función de devolución de llamada que permite el manejo de fallas cuando Promise no está disponible o no se desea. Al pasar esta función se evitará que Promise se devuelva un. Obtiene un single Error objeto como argumento. Se ignora el valor devuelto de esta función.

Nombre: onSuccess

Tipo de datos: Función (objeto)

Descripción:
Una función de devolución de llamada que permite el manejo de éxitos cuando Promise no está disponible o no se desea. Al pasar esta función se evitará que Promise se devuelva un. Obtiene un single Success objeto como argumento. Se ignora el valor devuelto de esta función.

Nombre: options

Tipo de datos: Objeto

Descripción:
Un Video.js objeto de opciones pasar durante el proceso de creación del jugador. Estas opciones tendrán prioridad sobre cualquier configuración especificada en la configuración de Brightcove Player. Este parámetro no se puede utilizar con incrustaciones de iframe.

Nombre: playerId

Tipo de datos: cadena

Descripción:
Un ID de jugador de Brightcove Player. El valor predeterminado es 'default'.

Nombre: playlistId

Tipo de datos: cadena | number

Descripción:
Un ID de lista de reproducción de Video Cloud o un ID de referencia de lista de reproducción.

Nombre: playlistVideoId

Tipo de datos: cadena | number

Descripción:

Un ID de video de Video Cloud que se encontraría en la lista de reproducción resultante especificada por playlistId. Este parámetro se ignora si playlistId Está perdido.

Nombre: Promise

Tipo de datos: Función (función)

Descripción:
Se utiliza para proporcionar explícitamente una Promise implementación. Si se proporciona, se utilizará en lugar de cualquier Promise. El valor predeterminado es window.Promise

Nombre: refNode

Tipo de datos: Element | cadena

Descripción:
Required
El elemento DOM en el que se incrustará el reproductor. Si no se proporciona como un elemento DOM, se puede proporcionar como una cadena, que se pasará a document.querySelector.

Nombre: refNodeInsert

Tipo de datos: cadena

Descripción:
La forma en que se insertará el reproductor en relación con el elemento DOM de referencia (especificado por refNode). El valor de este parámetro debe ser uno de los siguientes:

'append' o brightcovePlayerLoader.REF_NODE_INSERT_APPEND: El jugador será el último hijo del nodo de referencia.
'prepend' o brightcovePlayerLoader.REF_NODE_INSERT_PREPEND: El jugador será el primer hijo del nodo de referencia.
'before' o brightcovePlayerLoader.REF_NODE_INSERT_BEFORE: El jugador será hermano anterior del nodo de referencia.
'after' o brightcovePlayerLoader.REF_NODE_INSERT_AFTER: El jugador será el próximo hermano después del nodo de referencia.
'replace' o brightcovePlayerLoader.REF_NODE_INSERT_REPLACE: El nodo de referencia será eliminado y reemplazado por el jugador.

Nombre: videoId

Tipo de datos: cadena | number

Descripción:
Una identificación de video de Video Cloud o una identificación de referencia de video.