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

    Incorporación de experiencias en página en un CMS

    En este tema se proporcionan directrices para integrar las experiencias en página de Brightcove en su CMS.

    Introducción

    Además de los reproductores de vídeo individuales básicos y los reproductores de listas de reproducción, Brightcove ofrece un tipo de reproductor multivídeo, denominado Experiencias en página. Desea permitir que los usuarios incrusten fácilmente una experiencia y ofrezcan la mayor flexibilidad posible en la generación del código de inserción de Brightcove Experience para que puedan controlar el aspecto sin ser expertos en HTML o JavaScript.

    Tenga en cuenta que las experiencias en página forman parte de Gallery, que se incluye en Video Marketing Suite y Enterprise Video Suite , y también se pueden comprar como un paquete complementario para Video Cloud. Consulte los detalles al gestor de su cuenta.

    Cuadro de diálogo de selección Experiencia en página

    Debería haber un cuadro de diálogo que permita al usuario elegir una experiencia en la página. Este diálogo debería permitir al usuario establecer los campos enumerados a continuación:

    1. Cuenta de Brightcove: El usuario debería poder elegir una cuenta de Brightcove si aún no está seleccionada.
    2. Filtro de búsqueda: El usuario debe poder introducir una cadena de búsqueda para filtrar la lista de experiencias mostradas. Si utiliza la API de búsqueda de Brightcove, la cadena de búsqueda debe estar codificada en URI.
    3. Pedido: La lista de experiencias mostradas debe ordenarse por nombre. El usuario debe poder seleccionar el orden ascendente o descendente. El valor predeterminado debe ser ascendente.

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

    1. Muestra una lista de experiencias en función de la selección del usuario anterior. Permitir al usuario seleccionar una experiencia.
    2. Para la lista mostrada de Experiencias:
      1. Sólo se deben mostrar las experiencias publicadas
      2. Debe mostrarse el nombre de la experiencia, la plantilla y el ID.
    3. Muestra un enlace en el que se puede hacer clic que abrirá el reproductor de experiencia en una nueva pestaña del navegador.

    Ejemplo de implementación de diálogo

    Cuadro de diálogo Selección de experiencia de muestra
    Cuadro de diálogo Selección de experiencia de muestra

    Cuadro de diálogo de incrustar Experiencia en página

    Debería haber un cuadro de diálogo que permita al usuario controlar el formato de la experiencia en la página web. Este diálogo debería permitir al usuario establecer los campos enumerados a continuación:

    1. Tipo de incrustación: El usuario debería poder elegir entre iFrame y código de inserción JavaScript. El valor predeterminado debe ser JavaScript.
    2. Tallas: El usuario debe poder seleccionar entre el tamaño Responsive o Fijo. [1-1]
      1. Si iFrame, el valor predeterminado debe ser Fijo y Responsive debería deshabilitarse.
      2. Si Javascript, el valor predeterminado debería ser Responsive.
    3. Ancho, Altura: El usuario debe poder introducir Ancho y Alto. [1-1]
      1. Si iFrame, el valor predeterminado debe ser Fijo y Responsive debería deshabilitarse.
      2. Si Responsive, se deben deshabilitar el ancho y el alto.
    4. Anular vídeos de experiencia: El usuario debería poder anular los vídeos predeterminados en una experiencia con una lista de vídeos o con una lista de reproducción. Si el usuario selecciona anular los vídeos de experiencia, permita al usuario elegir vídeos o una lista de reproducción según la sección «Anulación de vídeos de experiencia» que aparece a continuación.

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

    1. El código de inserción de Brightcove generado debe mostrarse al usuario en el cuadro de diálogo.
    2. El usuario debería poder realizar ediciones en el código de inserción. A pesar de que estamos tratando de dar al usuario tanta flexibilidad como sea posible en la configuración del código de inserción, puede haber casos en los que necesite anular lo que se genera automáticamente.
    3. Si el usuario modifica una de las selecciones anteriores en el cuadro de diálogo, las ediciones del usuario se sobrescribirán con el código recién generado.

    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.

    Anulación de vídeos de Experiencia

    Si el usuario decide anular los vídeos de experiencia, el cuadro de diálogo debería permitir al usuario establecer los campos enumerados a continuación:

    1. 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.
    2. 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)
    3. 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)
    4. 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.
    5. 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:

    1. Muestra una lista de vídeos o listas de reproducción basada en la selección del usuario anterior. Permitir al usuario seleccionar varios vídeos o una lista de reproducción.
    2. 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. Se pueden seleccionar uno o más vídeos.
    3. 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, el ID y — en lugar del número de vídeos.
      3. Sólo se puede seleccionar una lista de reproducción.
    4. 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.

    Ejemplo de implementación de diálogo de anulación de vídeo

    Cuadro de diálogo de modificación de vídeo de ejemplo
    Cuadro de diálogo de modificación de vídeo de ejemplo

    Ejemplo de implementación de diálogo de modificación de lista de reproducción

    Cuadro de diálogo de modificación de vídeo de ejemplo
    Cuadro de diálogo de modificación de vídeo de ejemplo

    Incrustar parámetros y código

    En la sección se describe cómo generar el código de incrustación de Experiencia 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

    • %ACCOUNTID% = ID de cuenta de Brightcove seleccionado por el usuario
    • %VIDEOIDLIST% = ID de vídeo seleccionado por el usuario, delimitado por comas sin espacios
    • %PLAYLISTID% = ID de lista de reproducción seleccionada por el usuario
    • %EXPERIENCEID% = 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

    iFrame Experience Player incrustar

    Parámetros para el tamaño de respuesta

    N/A - Opción de respuesta no seleccionable

    Parámetros para el tamaño fijo

        %MAXWIDTH% = ‘’
        %MINWIDTH% = ‘’
        %WIDTH% = Width . ‘px’
        %HEIGHT% = Height . ‘px’

    Código de inserción de Brightcove

        <div style="display:block;position:relative;width:%WIDTH%;height:%HEIGHT%">
          <iframe src="https://players.brightcove.net/%ACCOUNTID%/experience_%EXPERIENCEID%/index.html?videoIds=%VIDEOIDLIST%
            &playlistId=%PLAYLISTID%
            &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:experienceiframe" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" style="width:100%;height:100%;top:0px;bottom:0px;right:0px;left:0px;border:none;margin-left:auto;margin-right:auto;position:absolute">
          </iframe>
        </div>

    Ejemplo de implementación

    Ejemplo de implementación
    Ejemplo de implementación

    JavaScript (en página) Experiencia incrustación del reproductor

    Parámetros para el tamaño de respuesta

        
          %WIDTH% = ‘’[2-1]
          %HEIGHT% = ‘’[2-1]
        

    Notas

    • [ 2-1] Ancho y Alto no seleccionables por el usuario

    Parámetros para el tamaño fijo

        
          %WIDTH% = Width . ‘px’
          %HEIGHT% = Height . ‘px’
        

    Código de inserción de Brightcove

        <div style="display:block;position:relative;width:%WIDTH%;height:%HEIGHT" data-experience="%EXPERIENCEID%" data-video-ids=”%VIDEOIDLIST% "
          data-playlist-id=”%PLAYLISTID%" data-usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:experiencejavascript" style="
          display: block;
          position: relative; ">
        </div>
        <script src="//players.brightcove.net/%ACCOUNTID%/experience_%EXPERIENCEID%/live.js "></script>

    Ejemplo de implementación

    Ejemplo de implementación
    Ejemplo de implementación