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.
- Para un reproductor de vídeo, el valor predeterminado debe ser Javascript.
- 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].
- Para un reproductor de vídeo, el valor predeterminado debe ser Responsive.
- Para un reproductor de lista de reproducción:
- Si iFrame, el valor predeterminado debe ser Responsive.
- Si Javascript, el valor predeterminado debe ser Fijo.
- Relación de aspecto: El usuario debe poder seleccionar la relación de aspecto [1-1].
- Las opciones son:
16:9
4:3
Custom
- El valor predeterminado debe ser
16:9
.
- Las opciones son:
- Ancho, Altura: El usuario debe poder introducir Ancho y Alto [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.
- Los valores predeterminados deben ser
640
para Ancho y360
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
- Si el campo está presente y el valor es
true
, es un reproductor de lista de reproducción - Si el valor es
false
o elplaylist
no existe, realice el siguiente paso.
- Si el campo está presente y el valor es
- Iterar a través de la
plugins
lista (si está presente) y busque unregistry_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 siAutoplay
está habilitada, de lo contrario es unanull
cadena%MUTED%
= silenciado siMuted
está habilitado, de lo contrario es unanull
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

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.
- 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.
- 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:
- Sólo los vídeos activos deben aparecer en la lista.
- Debe mostrarse la imagen en miniatura, el nombre del vídeo y el ID.
- Sólo se puede seleccionar un vídeo.
- Al mostrar una lista de listas de reproducción:
- 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.
- 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.
- 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
- Integración de su CMS con Video Cloud
- Obtener una lista de vídeos
- Obtener una lista de listas de reproducción
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 API
great%2Bblue
Vídeos devueltos: todos los que incluyen las palabras:
great
Yblue
[2-1] -
Cadena de búsqueda:
great blue
La cadena en la llamada debe ser:CMS API
great%20blue
Los vídeos devueltos son todos los que incluyen las palabras:
great
Oblue
[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 Blues
Great Blue Heron