Paso a paso: Gestión de jugadores

Introducción

En este documento paso a paso, realizará las siguientes tareas:

• Crea un jugador
• Actualiza el reproductor para reproducir automáticamente el video
• Personaliza un reproductor agregando un complemento
• Mostrar la configuración de un jugador

Empezar

El enfoque que adopta este documento paso a paso es utilizar declaraciones curl para comunicarse con la API de Player Service. La herramienta curl se utiliza en la línea de comandos para transferir datos con sintaxis URL. Se puede obtener más información sobre curl en https://curl.haxx.se.

Ciertamente, no tiene que usar curl como lo hace en este documento paso a paso por simplicidad. Por supuesto, puede utilizar su idioma favorito para comunicarse con las API. Revisar la Configuración para muestras de gestión de jugadores que demuestra cómo usar la autenticación básica, AJAX y JavaScript para escribir algunas mini-aplicaciones para tareas básicas como crear un reproductor, mostrar todos sus jugadores, eliminar jugadores, etc.

Es necesario realizar algunos pasos preliminares antes de que pueda comenzar a utilizar la API. Estos son:

• Inicie sesión en Studio. Si tiene varias cuentas, use el menú desplegable para seleccionar aquella en la que le gustaría crear sus nuevos jugadores. Para que el sistema de credenciales funcione correctamente, debe tener derechos de administrador en esta cuenta. Si no está seguro de si un usuario tiene derechos de administrador, vaya a la página Configuración de usuarios para ver los usuarios enumerados junto con su función.
• En Studio, asegúrese de haber seleccionado CASA de las listas de módulos. En la esquina superior izquierda de la página, justo debajo del nombre de la cuenta, podrá copiar su ID de la cuenta.

  

• En la línea de comando, ingrese lo siguiente para asignar el valor de ID de cuenta a una variable de entorno:

          export ACCOUNT_ID=YourAccountID
          
          

• La autenticación se gestionará proporcionando la dirección de correo electrónico de su cuenta como parte de la declaración curl, y luego la API le pedirá una contraseña. Dado que la dirección de correo electrónico se utilizará con frecuencia, también asigne ese valor a una variable de entorno:

          export EMAIL=YourEmailAddress
          
          

Ahora está listo para comenzar a utilizar la API.

Crea un jugador

Ahora puede crear un reproductor con una llamada a la API de administración de jugadores. Esta llamada a la API se explica con todo detalle en la Descripción general de la API de administración de jugadores documento. Se sugiere que copie y pegue las siguientes declaraciones curl en la línea de comando.

Los siguientes pasos le ayudarán a crear un reproductor.

1. La primera declaración de curl crea al jugador y le asigna un nombre y una descripción. Después de pegar esta declaración en la línea de comando y presionar Ingresar , se le pedirá su contraseña.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request POST \
             --data '{
               "name": "My New Player Name v2",
               "description": "My new player description"
               }' \
             https://players.api.brightcove.com/v1/accounts/{account_id}/players
           

   Verá que el servidor devuelve datos de respuesta en formato JSON:

           {
             "id": "S1qN4xeG7",
             "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
             "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
             "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
             "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
           }
           

2. Vea su reproductor usando uno (o todos) de los siguientes valores (en este punto, no hay video en el reproductor, pero puede publicar un video usando su reproductor recién creado usando Studio):
   • Copia el url en un navegador para ver su reproductor.
   • Copia el embed_code en una página HTML para ver su reproductor en un iframe. Para que esto funcione correctamente, la página que contiene el iframe debe ser servida desde un servidor HTTP real.
   • La embed_in_page El uso de la función se detalla en la Opciones disponibles para el código de inserción avanzado (en la página) documento.

Actualizar un jugador

Ahora ha realizado los conceptos básicos para crear un reproductor. A continuación, aprenderá a realizar una sencilla actualización del reproductor. En este caso, configurará el reproductor para que reproduzca automáticamente el video en el reproductor, si el navegador lo permite.

1. En el JSON devuelto por la creación del reproductor, un id se mostró el valor. Copie esto en un PLAYER_ID Variable ambiental.

           export PLAYER_ID=YourPlayerID
           
           

2. Para actualizar el reproductor, utilizará HTTP PATCH método. Enviará datos para actualizar su reproductor. Usted establecerá el autoplay opción a true. Copie y pegue la siguiente instrucción curl y ejecútela.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request PATCH \
             --data '{
               "autoplay": true
             }' \
           https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           

3. Asegúrese de que el servidor devuelva datos que incluyan el id , preview_url y preview_embed_code valores en el siguiente formato JSON:

           {
             "id": "S1qN4xeG7",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
             "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
           }
           

4. Utilice el preview_url o preview_embed_code valores para ver los cambios en la configuración de su reproductor. Verá que la reproducción automática ahora es verdadera.
5. Ahora publicará el reproductor para enviarlo a la ubicación correcta para que lo vean los usuarios. Ingrese el siguiente comando:

           curl \
           --header "Content-Type: application/json" \
           --user $EMAIL \
           --request POST \
           https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish
           
           

   Una vez que se publique el reproductor, tendrá reproductores que difieren de las versiones de vista previa. Las versiones publicadas se diferencian de las versiones preliminares en los siguientes aspectos:

   • El JavaScript y CSS se minimizan, concatenan e incorporan directamente al reproductor.
   • Se genera una versión de baja resolución de la imagen del póster y se inserta en la página para mejorar los tiempos de carga percibidos en las redes con un alto tiempo de configuración de solicitudes (es decir, redes de datos celulares).
   • La versión anterior del reproductor se guarda para que se pueda recuperar si se descubren problemas después de que la actualización se active.
6. Asegúrese de que la respuesta JSON de la publicación del reproductor aparezca de la siguiente manera:

           {
           "id": "S1qN4xeG7",
           "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
           "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
           "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
           }
           
           

7. Utilice una de las implementaciones del reproductor para asegurarse de que su reproductor publicado esté funcionando correctamente.

Personaliza un jugador

Puede personalizar su reproductor usando complementos. Puede aprender a incluir complementos preexistentes en su reproductor o crear los suyos propios en el Paso a paso: Desarrollo de complementos.

En este caso, utilizará un complemento preexistente muy simple para superponer un mensaje de texto en el video. A continuación se muestra el código de un complemento que crea una etiqueta de párrafo HTML. Nota: se asigna un nombre de clase y texto al párrafo, luego se agrega al reproductor existente. Este complemento ya existe para su conveniencia y se encuentra en //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js.

        videojs.registerPlugin('firstPlugin', function() {
          var player = this,
          overlay = document.createElement('p');
          overlay.className = 'vjs-overlay';
          overlay.innerHTML = "First Plugin Working!";
          player.el().appendChild(overlay);
        });
        
        

El párrafo debe tener un estilo para evitar, en este caso particular, texto negro sobre fondo negro. Los siguientes son estilos aplicados al nombre de clase del párrafo. Esta hoja de estilo ya existe para su conveniencia y se encuentra en //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css.

        .vjs-overlay {
          background-color: #333333;
          color: white;
          font-size: 2em;
          padding: 5px;
          position: absolute;
          top: 100px;
          left: 20px;
          width: 150px;
        }
        
        

Así como usó una declaración curl para asignar la fuente de video y la imagen del póster, usará una declaración curl para decirle al jugador lo siguiente:

• Ubicación del archivo JavaScript que contiene el código del complemento
• Ubicación de la hoja de estilo
• El nombre del complemento que se utilizará con el reproductor.

1. Utilice la siguiente declaración curl para que el complemento sea funcional.

           curl\
           --header "Content-Type: application/json"\
           --user $EMAIL\
           --request PATCH\
           --data '{
             "scripts": [
               "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"
              ],
              "stylesheets": [
               "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"
              ],
              "plugins": [{
                "name": "firstPlugin"
              }]
             }'\
           https: //players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           

2. Utilice la siguiente declaración de curl para publicar el reproductor actualizado. Este es el mismo código de publicación que usó en la sección anterior para publicar un reproductor.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request POST \
             https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish
           

3. Copie la URL devuelta y navegue por ella. Verá que el complemento está funcionando y se muestra el texto del complemento.

   

Cuando se agrega un complemento al reproductor mediante la API de administración de reproductores, ya sea un complemento proporcionado por Brightcove o un complemento personalizado que haya creado, el complemento se convierte en parte del propio código del reproductor.

Configuración de pantalla

Para depurar y confirmar el trabajo que ha realizado, a menudo es útil ver la configuración de un reproductor.

1. Para hacer esto, use un GET método con el configuration URL.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request GET \
             https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           
           

2. Verifique que la respuesta de configuración JSON sea similar a la siguiente:

           {
             "media": {
               "poster": {
                 "highres": "//solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
               },
               "sources": [{
                 "type": "application/x-mpegURL",
                 "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
               }, {
                 "type": "video/mp4",
                 "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
               }]
             },
             "compatibility": true,
             "video_cloud": {
               "video": "4093372393001",
               "policy_key": "BCpkADawqM3ugPRAtcx48_C4FjXiEiJORcRFnXkeL9siQUpauO_o7SaIhSnYvM24nUCeD74UFG1LMW8vtmaftsO1vYeeOn2iglfvEbG-c0PYwJ_zQCQGsvkrbgrNyEDvbEKjyrsQVXj0DOco"
             },
             "player": {
               "template": {
                 "name": "single-video-template",
                 "version": "6.7.0"
               }
             },
             "scripts": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
             "stylesheets": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
             "plugins": [{
               "name": "firstPlugin"
             }]
           }
           

Otra forma de ver la configuración del reproductor es navegar por el valor de URL devuelto y cambiar el index.html a config.json.

API del sistema de entrega

Las API de Delivery System permiten la administración y la implementación de un grupo de archivos, llamado repositorio. Estos archivos se administran a través de API REST y a través de git. La mayoría de las personas no deberían necesitar estas API al crear o editar reproductores, pero pueden ser un conjunto muy interesante de API para usar con otros fines. Si desea probarlos, puede hazlo aquí. Para una introducción práctica, pruebe el Paso a paso: Sistema de entrega documento.