Incorporación de reproductores de Brightcove en un CMS

En este tema se proporciona orientación sobre cómo proporcionar un cuadro de diálogo para que los usuarios de CMS puedan incrustar un reproductor de Brightcove en una página.

Introducción

Cuando los usuarios de CMS incrustan un reproductor de vídeo o lista de reproducción en una página, desea ofrecerles la mayor flexibilidad posible en la generación del código incrustado del reproductor de Brightcove para que puedan controlar la apariencia del reproductor de Brightcove en la página web, pero no esperar que sean expertos en HTML o JavaScript.

En este tema se proporcionan directrices sobre cómo hacerlo. La audiencia de este documento son principalmente socios de Brightcove, pero será útil para cualquier persona que integre Video Cloud o el reproductor independiente de Brightcove con su CMS.

Comportamiento del diálogo de inserción del reproductor

Debería haber un cuadro de diálogo que permita al usuario controlar el formato del reproductor en la página web. Este diálogo debería permitir al usuario establecer los campos enumerados a continuación. Se supone que el usuario ya ha seleccionado una cuenta de Brightcove y un vídeo o una lista de reproducción antes de que se muestre este cuadro de diálogo. De lo contrario, la selección de la cuenta de Brightcove y el vídeo o la lista de reproducción debe realizarse primero como se describe en el Apéndice A a continuación.

Jugador: El usuario debe poder elegir un jugador entre los jugadores de Brightcove disponibles. Si están incrustando un reproductor de vídeo, sólo deben estar disponibles los reproductores que no estén habilitados para la lista de reproducción. Si están incrustando un reproductor de lista de reproducción, sólo los jugadores habilitados para la lista de reproducción deberían estar disponibles para elegir.
Reproducción automática: El usuario debería poder activar/desactivar la reproducción automática. El valor predeterminado está deshabilitado.
Silenciar: El usuario debería poder activar/desactivar Silenciar. El valor predeterminado está deshabilitado.
Tipo de incrustación: El usuario debería poder elegir entre iFrame y código de inserción Javascript.
1. Para un reproductor de vídeo, el valor predeterminado debe ser Javascript.
2. Para un reproductor de lista de reproducción, el valor predeterminado debe ser iFrame.
Tallas: El usuario debe poder seleccionar entre Responsive [1-1] o Tamaño fijo [1-2].
1. Para un reproductor de vídeo, el valor predeterminado debe ser Responsive.
2. Para un reproductor de lista de reproducción:
  1. Si iFrame, el valor predeterminado debe ser Responsive.
  2. Si Javascript, el valor predeterminado debe ser Fijo.
Relación de aspecto: El usuario debe poder seleccionar la relación de aspecto [1-1].
1. Las opciones son:
  - 16:9
  - 4:3
  - Custom
2. El valor predeterminado debe ser 16:9.
Ancho, Altura: El usuario debe poder introducir Ancho y Alto [1-1].
1. Si la relación de aspecto es 16:9 o 4:3 , el campo Alto debe estar atenuado y calcularse automáticamente en función de la anchura y la relación de aspecto.
2. Los valores predeterminados deben ser 640 para Ancho y 360 Alto cuando Relación de aspecto es Personalizada.

Notas

^{[ 1-1]} Si el CMS proporciona un contenedor nativo para incrustar código que permite al usuario especificar Responsive vs Fixed y Ancho/Alto, podría tener más sentido usar el contenedor para dimensionar y hacer que el código de inserción de Brightcove siempre responda.
^{[ 1-2]} El código de inserción responsive incluido a continuación utiliza el ancho como ancho máximo.

Documentación relacionada de Brightcove

Ayuda general sobre la integración de Video Cloud con su CMS

Integración de su CMS con Video Cloud

Obtener una lista de jugadores

Referencia de la API de administración de jugadores

Identificación de jugadores de listas de reproducción

Itere sobre la lista de jugadores devueltos por la solicitud de API de administración de jugadores a la que se hace referencia anteriormente.
Busque el campo:playlist
1. Si el campo está presente y el valor es true, es un reproductor de lista de reproducción
2. Si el valor es false o el playlist no existe, realice el siguiente paso.

Iterar a través de la plugins lista (si está presente) y busque un registry_id campo igual a @brightcove/videojs-bc-playlist-ui ; si está presente, es un reproductor de lista de reproducción; si no, no lo es. Aquí hay una muestra de lo que es el retorno en la lista de jugadores:

"items": [
   {
      {
      "account_id": "4031511818001",
      "branches": {
        "master": { "configuration": {
          "playlist": true, "plugins": [
              {
                "options": {
                  "account_id": "4031511818001",
                  "branches": {
                    "master": { "configuration": {
                      "id": "NkVhrXzug",
                      "playlist": true,
                      "plugins": [], // this is a v1 playlist player ...
        {
          "account_id": "4031511818001",
          "branches": {
            "master": { "configuration": {
              "playlist": true,
              "plugins": [
                {
                  "options": {
                    "playOnSelect": true
                  },
                  "registry_id": "@brightcove/videojs-bc-playlist-ui",
                  "version": "2.x" // this is a v2 playlist player
                  }
                }
              ] ...

Incrustar parámetros y código

En las secciones siguientes se describe cómo generar el código de inserción del reproductor de Brightcove basado en las selecciones del usuario. Los valores se sustituyen en el código de inserción como se describe a continuación.%XYZ%

Parámetros comunes

%AUTOPLAY% = reproducción automática si Autoplay está habilitada, de lo contrario es una null cadena
%MUTED% = silenciado si Muted está habilitado, de lo contrario es una null cadena
%ACCOUNTID% = ID de cuenta de Brightcove seleccionado por el usuario
%VIDEOID% = ID de vídeo seleccionado por el usuario
%PLAYLISTID% = ID de lista de reproducción seleccionada por el usuario
%PLAYERID% = ID de reproductor de vídeo seleccionado por el usuario o ID de reproductor de lista de reproducción
%CMS% = Nombre del CMS
%CMSVERSION% = Versión de CMS
%CONNECTORVERSION% = Versión del conector

Reproductor de vídeo iFrame incrustado

Parámetros para el tamaño de respuesta (con tamaño máximo)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parámetros para el tamaño fijo

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Código de inserción de Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?videoId=%VIDEOID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style= width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div

Ejemplo de implementación

Incrustar reproductor JavaScript (en página)

Parámetros para el tamaño de respuesta (con tamaño máximo)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parámetros para el tamaño fijo

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Código de inserción de Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%; ">
    <video-js data-video-id="%VIDEOID%"
      data-account="%ACCOUNTID%"
      data-player="%PLAYERID%"
      data-embed="default"
      data-usage="cms: :%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript" class="video-js"
      controls %AUTOPLAY% %MUTED%
      style="width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </video-js>
    <script src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.min.js"></script>
  </div>
</div>

Ejemplo de implementación

Implementación de ejemplo de incrustar en página

iFrame Playlist Player Insertar

Parámetros para el tamaño de respuesta (con tamaño máximo)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parámetros para el tamaño fijo

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Código de inserción de Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?playlistId=%PLAYLISTID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style=" width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div>

Ejemplo de implementación

Incrustar reproductor de lista de reproducción JavaScript (en la página)

Parámetros para el tamaño de respuesta (con tamaño máximo)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%PADDINGTOP% = na
%WIDTH% = 100%
%HEIGHT% = 65%
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% = Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Parámetros para el tamaño fijo

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = Width . ‘px’
%PADDINGTOP% = na
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% =Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Código de inserción de Brightcove

<style type="text/css">
  .vjs-playlist {
    background-color: #000000;
    width: %WIDTH%;
    height: calc (%THUMBNAILHEIGHT% + 16px);
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .vjs-playlist-title-container {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-playlist-now-playing-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-up-next-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
    text-align: right;
  }

  .vjs-playlist-duration {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-mouse.vjs-playlist {
    background-color: #000000;
  }

  li.vjs-playlist-item {
    background-color: #000000;
    height: %THUMBNAILHEIGHT%;
    width: %THUMBNAILWIDTH%;
    display: inline-block;
    border: 2px solid #000000;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
  }

  li.vjs-playlist-item:hover {
    border-color: #FFFFFF;
  }
</style>
<div style="
display: block; position: relative; width: %WIDTH%; height: ; min-width:
%MINWIDTH%; max-width: %MAXWIDTH%; ">
  <video-js data-playlist-id="%PLAYLISTID%" data-account="%ACCOUNTID%" data-player="%PLAYERID%" data-embed="default" data- usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript " class="video-js" controls %AUTOPLAY% %MUTED% style="
width: %WIDTH%; height: %HEIGHT%; position: relative;
top: 0px; bottom: 0px; right: 0px; left: 0px;
“> </video-js> <script
src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index .min.js "></script>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse "></ol> </div>

Ejemplo de implementación

Apéndice A

Si no se selecciona un vídeo o una lista de reproducción antes de abrir el cuadro de diálogo de incrustación del reproductor, el vídeo o la lista de reproducción (y la cuenta de Brightcove si es necesario) se pueden seleccionar en el cuadro de diálogo. El diálogo debe presentar al usuario los campos enumerados a continuación:

Cuenta de Brightcove: El usuario debería poder elegir una cuenta de Brightcove si aún no está seleccionada.
Filtro de búsqueda: El usuario debe poder introducir una cadena de búsqueda para filtrar la lista de vídeos o listas de reproducción mostrados. Si utiliza la API de búsqueda de Brightcove, la cadena de búsqueda debe estar codificada en URI (consulte el ejemplo a continuación).
Carpeta: El usuario debe poder seleccionar un nombre de carpeta de la cuenta de Brightcove para filtrar la lista de vídeos mostrados. La API de Brightcove no proporciona un filtro integrado para las carpetas, por lo que el código del cliente tendrá que recuperar todos los vídeos y filtrar por carpeta. (No se aplica a las listas de reproducción)
Límite: El usuario debe poder limitar el número de vídeos devueltos, principalmente para mejorar el rendimiento de la búsqueda. Cuando se utiliza la búsqueda de Brightcove, el límite máximo que se puede especificar es 100. Para devolver más de 100 vídeos, se debe implementar un mecanismo de paginación. Además, si el usuario ha seleccionado una carpeta para filtrar, el cliente debe solicitar todos los vídeos de la cuenta utilizando el mecanismo de paginación y, a continuación, filtrar localmente esa lista por Carpeta y devolver el número de vídeos especificado por el límite de usuario. (No se aplica a las listas de reproducción)
Ordenar por: El usuario debe poder seleccionar un campo de ordenación.
1. En el caso de los vídeos, el usuario debe poder elegir el nombre del vídeo, la fecha de actualización, la fecha de creación, la fecha de inicio y el total de reproducciones. El valor predeterminado debe ser la fecha de actualización.
2. Para las listas de reproducción, el usuario elige el nombre y la fecha de modificación. El valor predeterminado debe ser la fecha de modificación.
Orden de clasificación: El usuario debe poder seleccionar el orden ascendente o descendente. El valor predeterminado debe ser descendente.

El cuadro de diálogo debe tener el siguiente comportamiento:

Muestra una lista de vídeos o listas de reproducción basada en la selección del usuario anterior. Permitir al usuario seleccionar un vídeo o una lista de reproducción.
Al mostrar una lista de vídeos:
1. Sólo los vídeos activos deben aparecer en la lista.
2. Debe mostrarse la imagen en miniatura, el nombre del vídeo y el ID.
3. Sólo se puede seleccionar un vídeo.
Al mostrar una lista de listas de reproducción:
1. Si la lista de reproducción es una lista de reproducción manual, muestre el nombre de la lista de reproducción, el ID y el número de vídeos de la lista de reproducción.
2. Si la lista de reproducción es una lista de reproducción inteligente, muestre el nombre de la lista de reproducción, ID y - en lugar del número de vídeos.
3. Sólo se puede seleccionar una lista de reproducción.
Muestra un enlace en el que se puede hacer clic que abrirá el reproductor de vídeo o lista de reproducción en una nueva pestaña del navegador.

Documentación relacionada de Brightcove

Ejemplo de implementaciones de diálogo

Selección de vídeo

Selección de lista de reproducción

Ejemplos de codificación URI

Cadena de búsqueda:great+blue

La cadena en la llamada debe ser:CMS APIgreat%2Bblue

Vídeos devueltos: todos los que incluyen las palabras: great Y blue^[2-1]
Cadena de búsqueda:great blue

La cadena en la llamada debe ser:CMS APIgreat%20blue

Los vídeos devueltos son todos los que incluyen las palabras: great O blue^[2-1]
Cadena de búsqueda:"great blue"

La cadena en la llamada debe ser:CMS API%22great%20blue%22

Los vídeos devueltos son todo lo que incluye la frase completa: [2-1]great blue

Notas

^{[ 2-1]} Stemming se aplica en todos los casos. Búsquedas como las mostradas arriba coincidirían también con los vídeos titulados.Great BluesGreat Blue Heron

Contenido de la página

Incorporación de reproductores de Brightcove en un CMS

Introducción

Comportamiento del diálogo de inserción del reproductor

Notas

Documentación relacionada de Brightcove

Ayuda general sobre la integración de Video Cloud con su CMS

Obtener una lista de jugadores

Identificación de jugadores de listas de reproducción

Incrustar parámetros y código

Parámetros comunes

Reproductor de vídeo iFrame incrustado

Parámetros para el tamaño de respuesta (con tamaño máximo)

Parámetros para el tamaño fijo

Código de inserción de Brightcove

Ejemplo de implementación

Incrustar reproductor JavaScript (en página)

Parámetros para el tamaño de respuesta (con tamaño máximo)

Parámetros para el tamaño fijo

Código de inserción de Brightcove

Ejemplo de implementación

iFrame Playlist Player Insertar

Parámetros para el tamaño de respuesta (con tamaño máximo)

Parámetros para el tamaño fijo

Código de inserción de Brightcove

Ejemplo de implementación

Incrustar reproductor de lista de reproducción JavaScript (en la página)

Parámetros para el tamaño de respuesta (con tamaño máximo)

Parámetros para el tamaño fijo

Código de inserción de Brightcove

Ejemplo de implementación

Apéndice A

Documentación relacionada de Brightcove

Ejemplo de implementaciones de diálogo

Selección de vídeo

Selección de lista de reproducción

Ejemplos de codificación URI

Notas