Incrustar Brightcove Players en un CMS

Este tema proporciona orientación sobre cómo proporcionar un cuadro de diálogo para que los usuarios de CMS les permitan incrustar un Brightcove Player en una pagina

Introducción

Cuando los usuarios de CMS están incorporando un video o una lista de reproducción player en una página, desea darles la mayor flexibilidad posible en la generación de Brightcove player incrustar código para que puedan controlar la apariencia de Brightcove player en la página web, pero no espere que sean expertos en HTML o JavaScript.

Este tema proporciona pautas sobre cómo hacerlo. La audiencia para este documento es principalmente socios de Brightcove, pero será útil para cualquiera que se integre Video Cloud o el independiente Brightcove Player con tu CMS.

Player incrustar el comportamiento del diálogo

Debe haber un cuadro de diálogo que permita al usuario controlar el formato del player en la página web Este cuadro de diálogo debe permitir al usuario establecer los campos que se enumeran a continuación. Se supone que el usuario ya ha seleccionado una cuenta de Brightcove y un video o 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 video o la lista de reproducción debe ocurrir primero como se describe en Apéndice A a continuación.

Player: El usuario debe poder elegir un player de la Brightcove disponible players. Si están incrustando un video player, solo se habilita la no lista de reproducción players debe estar disponible para elegir. Si están incorporando una lista de reproducción player, solo la lista de reproducción habilitada players debe estar disponible para elegir.
Autoplay: El usuario debería poder habilitar / deshabilitar la reproducción automática. El valor predeterminado está deshabilitado.
Mudo: El usuario debería poder habilitar / deshabilitar Silencio. El valor predeterminado está deshabilitado.
Tipo de inserción: El usuario debería poder elegir entre iFrame y Javascript incrustar código.
1. Para un video player, el valor predeterminado debería ser Javascript.
2. Para una lista de reproducción player, el valor predeterminado debería ser iFrame.
Guía de Tallas: El usuario debería poder seleccionar entre Responsive^{[1 1-]} o tamaño fijo^{[1 2-]}.
1. Para un video player, el valor predeterminado debe ser Responsive.
2. Para una lista de reproducción player:
  1. Si iFrame, el valor predeterminado debe ser Responsive.
  2. Si es Javascript, el valor predeterminado debería ser Fixed.
Relación de aspecto: El usuario debería 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 debería poder ingresar Ancho y Altura^{[1 1-]}.
1. Si la relación de aspecto es 16:9 or 4:3,el archivo MXNUMXXNUMX que quiere cargar en la app Altura el campo debe aparecer en gris y calcularse automáticamente en función de Ancho y Relación de aspecto.
2. Los valores predeterminados deben ser 640 idea Ancho y 360 idea Altura cuando la relación de aspecto es personalizada.

Notas

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

Documentación relacionada de Brightcove

Ayuda general en la integración. Video Cloud con tu CMS

Integrando tu CMS con Video Cloud

Obtener una lista de players

Player Management API referencia

Identificando lista de reproducción players

Iterar sobre la lista de players devuelto por el Player Management API solicitud referenciada anteriormente.
Busca el playlist campo:
1. Si el campo está presente y el valor es true, es una lista de reproducción player
2. Si el valor es false o las playlist no existe, haz el siguiente paso.

Iterato a través del plugins lista (si está presente) y busque un registry_id campo igual a @brightcove/videojs-bc-playlist-ui; si eso está presente, es una lista de reproducción player; si no, no lo es. Aquí hay una muestra de lo que se devuelve en el playerlista de s:

"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

Las secciones a continuación describen cómo generar Brightcove player incrustar código basado en las selecciones del usuario. los %XYZ% los valores se sustituyen en el código de inserción como se describe a continuación.

Parámetros comunes

%AUTOPLAY% = reproducción automática si Autoplay habilitado, de lo contrario es un null cadena
%MUTED% = silenciado si Muted habilitado, de lo contrario es un null cadena
%ACCOUNTID% = ID de cuenta Brightcove seleccionada por el usuario
%VIDEOID% = ID de video seleccionado por el usuario
%PLAYLISTID% = ID de la lista de reproducción seleccionada por el usuario
%PLAYERID% = Video seleccionado por el usuario player ID o lista de reproducción player ID
%CMS% = Nombre de CMS
%CMSVERSION% = Versión de CMS
%CONNECTORVERSION% = Versión del conector

video de iFrame player incrustar

Parámetros para dimensionamiento receptivo (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 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

JavaScript (in-page) player incrustar

Parámetros para dimensionamiento receptivo (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 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 muestras incrustadas en la página

Lista de reproducción de iFrame Player Incrustar

Parámetros para dimensionamiento receptivo (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 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

Lista de reproducción de JavaScript (in-page) player incrustar

Parámetros para dimensionamiento receptivo (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 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 video o una lista de reproducción antes de abrir el player el cuadro de diálogo para insertar, el video o la lista de reproducción (y la cuenta de Brightcove si es necesario) deben seleccionarse en el cuadro de diálogo. El cuadro de diálogo debe presentar al usuario los campos enumerados a continuación:

Cuenta Brightcove: El usuario debe poder elegir una cuenta de Brightcove si aún no hay una seleccionada.
Filtro de búsqueda: El usuario debe poder ingresar una cadena de búsqueda para filtrar la lista de videos mostrados o listas de reproducción. 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 videos mostrados. La API de Brightcove no proporciona un filtro incorporado para las carpetas, por lo que el código del cliente deberá recuperar todos los videos y luego filtrar por carpeta. (No se aplica a las listas de reproducción)
Límite: El usuario debe poder limitar la cantidad de videos 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 videos, 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 videos en la cuenta utilizando el mecanismo de paginación y luego filtrar localmente esa lista por Carpeta y devolver la cantidad de videos especificada por el límite del usuario. (No se aplica a las listas de reproducción)
Ordenar Por: El usuario debería poder seleccionar un campo de clasificación.
1. Para los videos, el usuario debe poder elegir el nombre del video, la fecha actualizada, la fecha de creación, la fecha de inicio y el total de reproducciones. El valor predeterminado debe ser la fecha actualizada.
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 de clasificación ascendente o descendente. El valor predeterminado debe ser descendente.

El diálogo debe tener el siguiente comportamiento:

Muestre una lista de videos o listas de reproducción según la selección de usuario anterior. Permitir al usuario seleccionar un video o una lista de reproducción.
Al mostrar una lista de videos:
1. Solo los videos activos deben aparecer en la lista.
2. Se deben mostrar la imagen en miniatura, el nombre del video y la ID.
3. Solo se puede seleccionar un video.
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, ID y la cantidad de videos en la lista de reproducción.
2. Si la lista de reproducción es una lista de reproducción inteligente, muestre el nombre, la ID y, en lugar de la cantidad de videos, de la lista de reproducción.
3. Solo se puede seleccionar una lista de reproducción.
Mostrar un enlace en el que se puede hacer clic para abrir el video o la lista de reproducción player en una nueva pestaña del navegador.

Documentación relacionada de Brightcove

Ejemplos de implementaciones de diálogo

Selección de video

Selección de lista de reproducción

Ejemplos de codificación URI

Palabra de búsqueda: great+blue

Cadena en CMS API llamada debe ser: great%2Bblue

Videos devueltos: todos los que incluyen las palabras: great Y blue^{[2 1-]}
Palabra de búsqueda: great blue

Cadena en CMS API llamada debe ser: great%20blue

Los videos devueltos son todos los que incluyen las palabras: great OR blue^{[2 1-]}
Palabra de búsqueda: "great blue"

Cadena en CMS API llamada debe ser: %22great%20blue%22

Los videos devueltos son todo lo que incluye la frase completa: great blue^{[2 1-]}

Notas

^{[2 1-]} Stemming aplica en todos los casos. Las búsquedas como las que se muestran arriba coincidirían con videos titulados Great Blues así como también Great Blue Heron.