soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Paso a paso: Gestión de reproductores

    Este documento proporciona una introducción práctica a las operaciones básicas de la API de administración de Player.

    Introducción

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

    • Crear un reproductor
    • Actualizar el reproductor para reproducir automáticamente el vídeo
    • Personalizar un reproductor añadiendo un plugin
    • Mostrar la configuración de un reproductor

    ¡Póngase en marcha!

    El enfoque que adopta este documento paso a paso es utilizar instrucciones 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 el rizo en http://curl.haxx.se.

    Ciertamente, no tiene que usar curl como lo hace en este documento paso a paso en aras de las simplificaciones. Por supuesto, puede utilizar su idioma favorito para comunicarse con las API. Echa un vistazo a la configuración de muestras de administración de jugadores que muestra 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 tus reproductores, eliminar jugadores, etc.

    Se deben tomar algunos pasos preliminares antes de poder empezar a usar la API. Estos son los siguientes:

    • Inicie sesión en Studio. Si tienes varias cuentas, usa el menú desplegable para seleccionar la que quieras crear tus 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 la lista de Usuarios junto con su rol.
    • En Studio, asegúrese de haber seleccionado HOME en 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 cuenta.
      ID de cuenta para copiar
    • En la línea de comandos, escriba lo siguiente para asignar el valor de ID de cuenta a una variable de entorno:
              export ACCOUNT_ID=YourAccountID
              
              
    • La autenticación se manejará 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 usará con frecuencia, también asigne ese valor a una variable de entorno:
              export EMAIL=YourEmailAddress
              
              

    Ya está listo para empezar a usar la API.

    Crear un reproductor

    Ahora puede crear un reproductor con una llamada a la API de administración del reproductor. Esta llamada a API se explica detalladamente en el documento Descripción general de la API de Player Management . Se sugiere copiar y pegar las siguientes instrucciones curl en la línea de comandos.

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

    1. La primera instrucción curl crea el jugador y asigna un nombre y una descripción. Después de pegar esta instrucción en la línea de comando y presionar Entrar, 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": "http://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": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
                "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
                "preview_embed_in_page": "http://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 el reproductor utilizando uno (o todos) de los siguientes valores (en este punto, no hay ningún vídeo en el reproductor, pero puede publicar un vídeo utilizando el reproductor recién creado con Studio):
      • Copie el url en un navegador para ver su reproductor.
      • Copie 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 servirse desde un servidor HTTP real.
      • El uso de la embed_in_page función se detalla en el documento Opciones disponibles para el código de inserción avanzado (en página) .

    Vídeos de Video Cloud

    Por supuesto, puede crear un reproductor utilizando un vídeo de su biblioteca de Video Cloud. En lugar de utilizar una media sección en los datos JSON, se utiliza una video_cloud sección. La siguiente declaración curl muestra la creación del reproductor mediante el ID de un vídeo de Video Cloud.

            curl \
              --header "Content-Type: application/json" \
              --user $EMAIL \
              --request POST \
              --data '{
                "name": "Video Cloud CURL 10 March",
                "configuration": {
                  "video_cloud": {
                    "video": "4093372393001"
                  }
                }
              }' \
            https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players
            

    La respuesta es lógicamente equivalente a la respuesta al crear un reproductor usando medios/sources/src como se muestra arriba.

            {
            "id": "HJyMlHiuZ",
            "url": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html",
            "embed_code": "<iframe src="//players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>",
            "embed_in_page": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
            "preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html",
            "preview_embed_code": "<iframe src="//preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>"
            }
            
            

    Puede ver la configuración del reproductor explorando el valor de URL devuelto y cambiar el index.html a config.json. Para el jugador creado por la instrucción curl anterior, vería lo siguiente:

            {
              "account_id": "1507807800001",
              "compatibility": true,
              "embed_id": "default",
              "player": {
                "template": {
                  "name": "single-video-template",
                  "version": "6.5.0"
                }
              },
              "player_id": "HJyMlHiuZ",
              "player_name": "Video Cloud CURL 10 March",
              "updated_at": "2017-08-23T17:48:55.622Z",
              "video_cloud": {
                "policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
                "video": "4093372393001"
              }
            }
            

    El policy_key se añade automáticamente a la configuración del reproductor. Esto se crea mediante la API de políticas y permitirá que el reproductor tenga restricciones especiales para acceder a diferentes vídeos. En otras palabras, la clave de política controla qué vídeos se pueden ver cuando.

    Actualizar un reproductor

    Ya has realizado los conceptos básicos para crear un jugador. A continuación, aprenderá cómo hacer una actualización simple del jugador. 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 desde la creación del jugador se muestra un id valor. Copie esto en una variable de PLAYER_ID entorno.
              export PLAYER_ID=YourPlayerID
              
              
    2. Para actualizar el reproductor utilizará el PATCH método HTTP. Enviarás datos para actualizar tu reproductor. Establecerá la autoplay opción en true. Copie y pegue la siguiente instrucción curl y ejecútelo.
              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 id , preview_url y preview_embed_code valores en el siguiente formato JSON:
              {
                "id": "S1qN4xeG7",
                "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
                "preview_embed_in_page": "http://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 empujarlo a la ubicación correcta para que los usuarios lo vean. Escriba 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 publicado el reproductor, tendrá reproductores que difieren de las versiones de vista previa. Las versiones publicadas difieren de las versiones de vista previa de las siguientes maneras:

      • El JavaScript y CSS se minifican, concatenan e incrustan directamente en el 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 redes con un tiempo elevado de configuración de solicitudes (es decir, redes de datos celulares).
      • La versión anterior del reproductor se guarda para que pueda recuperarse si se detectan problemas después de que la actualización se activa.
    6. Compruebe que la respuesta JSON de la publicación del reproductor aparece de la siguiente manera:
              {
              "id": "S1qN4xeG7",
              "url": "http://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": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
              }
              
              
    7. Utilice una de las implementaciones del reproductor para asegurarse de que su reproductor publicado funciona correctamente.

    Personalizar un reproductor

    Puede personalizar su reproductor usando complementos. Puedes aprender a incluir plugins preexistentes en tu reproductor o crear los tuyos 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 presenta el código para un plugin que crea una etiqueta de párrafo HTML. Nota: se asigna un nombre de clase y texto al párrafo, luego se añade 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 concreto, el texto negro sobre un fondo negro. A continuación se muestran los estilos aplicados al nombre de clase del párrafo. Esta hoja de estilo ya existe para su comodidad 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;
            }
            
            

    Al igual que utilizó una instrucción curl para asignar la fuente de vídeo y la imagen del póster, usará una instrucción curl para decirle al reproductor lo siguiente:

    • Ubicación del archivo JavaScript que contiene el código del complemento
    • Ubicación de la hoja de estilo
    • El nombre del plugin que se utilizará con el reproductor
    1. Utilice la siguiente instrucción curl para hacer que el complemento funcione.
              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 instrucción curl para publicar el reproductor actualizado. Es el mismo código de publicación que utilizó 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 plugin está funcionando y que se muestra el texto del plugin.
      Texto del complemento
      Texto del complemento

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

    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 ello, utilice un GET método con la 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. Compruebe que la respuesta de configuración JSON es 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 echar un vistazo a la configuración del reproductor es explorando el valor de URL devuelto y cambiando el index.html a config.json.

    API del sistema de entrega

    Las API del sistema de entrega permiten la administración e implementación de un grupo de archivos, denominado repositorio. Estos archivos se administran a través de API REST y a través de git. Estas API no deberían ser necesarias para la mayoría de las personas al crear o editar reproductores, pero pueden ser un conjunto muy interesante de API para usar con otros fines. Si quieres probarlos, puedes hacerlo aquí. Para una introducción práctica, pruebe el paso a paso: Documento del sistema de entrega .


    Última actualización de la página el 29-09-2020