Muestras de código

En los siguientes ejemplos de código se muestran personalizaciones y mejoras de Brightcove Player. Las muestras marcadas con dos asteriscos ** dependen total o parcialmente de las funciones de Video Cloud. También puede encontrar una lista alfabética de muestras. aquí.
 
Reproductor Outstream (solo anuncio)

Reproductor Outstream (solo anuncio)

Este ejemplo proporciona funciones auxiliares de JavaScript que demuestran cómo ajustar dinámicamente el tamaño de un <div> elemento en la página DOM, inyecte Brightcove Player allí, cargue y reproduzca un anuncio, y luego elimine el reproductor

Desplazamiento del reproductor a la vista con anuncios

Desplazamiento del reproductor a la vista con anuncios

En el reproductor, observe que la barra de control de volumen horizontal reemplaza la barra de control vertical predeterminada.

Control de volumen horizontal (solo reproductor 1.x)

Control de volumen horizontal (solo reproductor 1.x)

En el reproductor, una barra de control de volumen horizontal reemplaza la barra de control vertical predeterminada.

Volumen vertical

Volumen vertical

Configure el control de volumen para que muestre un control deslizante vertical en lugar del diseño horizontal predeterminado.

Indicadores de anuncios en la barra de reproducción

Indicadores de anuncios en la barra de reproducción

Esta muestra muestra un reproductor donde los tres puntos de referencia de anuncios asociados con el video se muestran en la barra de reproducción como marcadores azules.

Publicidad con el complemento SSAI

Publicidad con el complemento SSAI

Este ejemplo utiliza anuncios IMA definidos en un archivo VMAP para entregar anuncios del lado del servidor en la transmisión de video. Hay un anuncio pre-roll, mid-roll y post-roll. El archivo VMAP se define en la configuración de anuncios.

Temporizador cuenta regresiva

Temporizador cuenta regresiva

Cree un temporizador de cuenta regresiva para un anuncio con el complemento Overlay.

 

Puerta de edad con diálogo modal

Puerta de edad con diálogo modal

Esta muestra usa ModalDialog para cubrir inicialmente al jugador. Cuando el usuario confirma su edad haciendo clic en la ventana modal, se muestran los controles y se reproduce el video.

Puntos de referencia Display CTA

Pantalla de puntos de referencia CTA **

El jugador muestra dos CTA diferentes que se muestran en función de los puntos de referencia. El primer CTA se muestra a los 3 segundos, durante 5 segundos de duración. La segunda CTA se muestra a los 13 segundos por una duración de 3 segundos.

Llamada a la acción dinámica **

Llamada a la acción dinámica **

Podrá ver tres técnicas diferentes de visualización de llamadas a la acción con este reproductor.

Reproducir/pausar vídeo desde iframe parent

Reproducir/pausar vídeo desde iframe parent

Haga clic en el botón reproducir o pausar, que es parte de la página principal del iframe, para ver cómo inicia la reproducción / pausa del video en el reproductor de iframe.

Puerta de la edad

Puerta de la edad

Esta muestra muestra una superposición que oculta los controles del reproductor y el botón de reproducción. Cuando el usuario confirma su edad haciendo clic en la superposición, se muestran los controles y se reproduce el video.

Reproducción automática con botón de activación de silencio

Reproducción automática con botón de activación de silencio

El video se comportará de manera diferente según el navegador / plataforma en la que ejecute el video. Si el vídeo se reproduce automáticamente con audio, lo hace. De lo contrario, el video comenzará a reproducirse, pero aparecerá un botón para activar el sonido.

Lista de reproducción aleatoria de videos de fondo

Lista de reproducción aleatoria de videos de fondo **

En el reproductor, verá videos seleccionados al azar de una lista de reproducción que se reproducen continuamente como videos de fondo. Al comienzo de cada video se muestran el título y la descripción de cada video.

Lista de reproducción de video de fondo

Lista de reproducción de video de fondo **

En el reproductor, verá que hay cuatro videos que se reproducen continuamente como videos de fondo. Además, al comienzo de cada video, el título y la descripción de cada video se muestran superpuestos al video de fondo.

Vídeo de fondo de ventana completa

Video de fondo de ventana completa **

En este tema, aprenderá a usar una lista de reproducción para proporcionar videos de fondo y cambiará automáticamente el tamaño del reproductor cuando se cambie el tamaño de la ventana del navegador para que el video llene por completo la ventana del navegador.

Creación de un bucle de vídeo

Creación de un bucle de vídeo

Hay algunas situaciones en las que es posible que desee utilizar un video en bucle. Este ejemplo repite el video 3 veces y luego detiene la reproducción del video.

Deshabilitar el depurador de progreso

Deshabilitar el depurador de progreso

Reproduce el video. Tenga en cuenta que no puede usar la barra de control de progreso para avanzar en el video.

Detener otros reproductores en la página cuando se inicia un vídeo

Detener otros reproductores en la página cuando se inicia un vídeo

Empiece a reproducir uno de los videos. A continuación, reproduzca el video en un reproductor diferente y observe que la reproducción de video se detiene en el otro reproductor que estaba reproduciendo.

Carga dinámica del reproductor

Carga dinámica del reproductor

En esta muestra, hace clic en el botón Agregar reproductor para crear y cargar dinámicamente el reproductor y luego reproducir el video.

RequireJS y Brightcove Player

RequireJS y Brightcove Player

En este tema, aprenderá a usar RequireJS, un cargador de archivos y módulos JavaScript, con Brightcove Player.

Cambie dinámicamente los videos de origen **

Cambie dinámicamente los videos de origen **

Haga clic en el botón debajo del reproductor para cambiar dinámicamente la fuente de video.

Aplicación de kiosco **

Aplicación de kiosco **

El jugador reproducirá un video de la matriz de objetos de video en un bucle infinito.

Animación de subtítulos

Animación de subtítulos

Inicie la reproducción de video. A medida que mueva el mouse sobre el jugador y lo aleje, los subtítulos se animarán para permanecer por encima de la barra de control.

Mostrar enlace relacionado **

Mostrar enlace relacionado **

Para esta muestra, verá el texto asociado con el video que se muestra debajo del reproductor. Utilice la sección MEDIA> INFORMACIÓN DE VIDEO de Studio para proporcionar el texto y el enlace asociado.

Mostrar vistas en la barra de control

Mostrar vistas en la barra de control

Cuando se reproduzca el video, verá las vistas del video en la barra de control. Puede haber un ligero retraso antes de que se muestre la información Analytics API se consulta de forma asincrónica para los datos.

Mostrar miniaturas al pasar el ratón

Mostrar miniaturas al pasar el ratón

Este ejemplo usa ModalDialog para mostrar cuatro imágenes en miniatura tomadas de varios puntos del video. Esto permite al usuario obtener un adelanto de lo que hay en el video.

Mostrar parachoques aleatorios

Mostrar parachoques aleatorios

En esta muestra, los bumpers publicitarios seleccionados al azar se reproducen antes de cada video de una lista de reproducción. En este caso, los bumpers son anuncios, pero no se extraen de un servidor de anuncios, sino que son videos definidos en la biblioteca de Video Cloud.

Logotipo de la empresa con hipervínculo

Logotipo de la empresa con hipervínculo

Este ejemplo muestra el logotipo de una empresa en la barra de control del reproductor. Al seleccionar el logotipo, se le redirigirá al sitio web de la empresa.

Carrusel Lightbox

Carrusel Lightbox

Navega por los videos en el carrusel. Seleccione una miniatura para reproducir el vídeo en un contenedor lightbox. Con la caja de luz mostrada, seleccione el enlace Cerrar para ocultar el contenedor lightbox.

Caja de luz con desplazamiento

Caja de luz con desplazamiento

Arrastre la barra de desplazamiento debajo de las imágenes en miniatura para navegar por los videos. Seleccione un vídeo para reproducir el vídeo en un contenedor lightbox. Con la caja de luz mostrada, seleccione el enlace Cerrar para ocultar el contenedor lightbox.

Lightbox simple

Lightbox simple

Este ejemplo muestra una imagen de póster de video interactivo que abre una caja de luz con Brightcove Player. Seleccione la imagen del póster para reproducir el video en un contenedor lightbox.

Complemento de superposición de logotipo

Complemento de superposición de logotipo

En el siguiente ejemplo, verá un logotipo en la parte inferior izquierda del reproductor. A los cinco segundos del video, el logotipo se desvanecerá lentamente.

Reproducción de varias sesiones

Reproducción de varias sesiones

Reproduzca el video y deténgalo en algún momento durante la reproducción. Cuando actualice la página, el video se reanudará donde lo dejó.

Navegar por el final de vídeo

Navegar por el final de vídeo

Al finalizar el video muy corto, verá aparecer una superposición con un enlace a la página de inicio de Brightcove. Se utiliza el complemento Overlay suministrado por Brightcove, por lo que no se necesita JavaScript. CSS se utiliza para diseñar la superposición.

Desplazamiento del reproductor a la vista

Desplazamiento del reproductor a la vista

Desplaza al jugador dentro y fuera de la vista. Cuando el reproductor esté completamente desplazado a la vista, el vídeo comenzará a reproducirse. Cuando mueva el reproductor fuera de la vista, el video dejará de reproducirse.

Alcalar una superposición

Alcalar una superposición

Este ejemplo le permite alternar la visualización de una superposición interactiva. Seleccione el botón Alternar superposición para mostrar y ocultar la superposición.

Activar el rebobinado con un evento personalizado

Activar el rebobinado con un evento personalizado

Inicie la reproducción de video. Luego haga clic en el botón de rebobinar video. Debería ver que la reproducción de video retrocede 5 segundos.

Descargar el complemento de video

Descargar el complemento de video **

Verá un ícono de descarga ubicado en el lado derecho de la barra de control para descargar la reproducción MP4 de más alta calidad del video cargado en el reproductor.

Mensaje de error personalizado en vivo

Mensaje de error personalizado en vivo

El reproductor no podrá conectarse a la transmisión en vivo. Se crea un objeto ModalDialog, se coloca una imagen personalizada en él y, a continuación, se muestra ModalDialog. Si ModalDialog está cerrado, se muestra el error predeterminado.

Patio de juegos de estilo de jugador

Patio de juegos de estilo de jugador

En este tema, utilizará un Codepen, que se muestra a continuación, como un campo de juego de estilo. Véalo en el sitio codepen.io para realizar cambios y siéntase libre de bifurcar el Codepen para su propio uso.

Lista de reproducción receptiva horizontal

Lista de reproducción receptiva horizontal

Verá la lista de reproducción horizontal debajo del reproductor. Si cambia el tamaño de su navegador, verá que el reproductor y la lista de reproducción cambian de tamaño.

Vídeos más vistos en la lista de reproducción **

Vídeos más vistos en la lista de reproducción **

En el siguiente ejemplo, verá el reproductor con una lista de reproducción que aparece a la derecha. La lista de reproducción se completa recuperando los videos más populares, basados en la mayor cantidad de reproducciones, utilizando el catálogo de Brightcove Player.

Videos más recientes en lista de reproducción **

Videos más recientes en lista de reproducción **

En el siguiente reproductor, verá una lista de reproducción que contiene los 10 videos más recientes agregados a la cuenta del Equipo de conocimiento.

Paginación de la API de reproducción

Paginación de la API de reproducción **

Este ejemplo usa un Brightcove Player para mostrar un video en el reproductor junto con los primeros 3 videos de la lista de reproducción. Seleccione el botón Videos siguientes para mostrar los 3 videos siguientes en la lista de reproducción.

Superposición de vídeos populares

Superposición de videos populares **

La superposición aparecerá cuando pause un video o el video finalice. La solicitud al Analytics API para obtener los 6 videos más vistos en las últimas 24 horas, junto con la respuesta de la API.

Lista de reproducción de videos populares

Lista de reproducción de videos populares **

La lista de reproducción aparecerá automáticamente tan pronto como se recuperen los datos del video. La solicitud al Analytics API para obtener los 6 videos más vistos en las últimas 24 horas, junto con la respuesta de la API.

Vídeos relacionados de una lista de reproducción

Vídeos relacionados de una lista de reproducción **

Este ejemplo muestra una superposición interactiva de miniaturas de video relacionadas cuando la reproducción está en pausa o ha finalizado.

Vídeos relacionados a través de etiquetas

Vídeos relacionados a través de etiquetas (API de CMS) **

Este ejemplo muestra una superposición interactiva de miniaturas de video relacionadas cuando la reproducción está en pausa o ha finalizado.

Vídeos relacionados a través de etiquetas

Vídeos relacionados a través de etiquetas (API de reproducción) **

Este ejemplo muestra una superposición interactiva de miniaturas de video relacionadas cuando la reproducción está en pausa o ha finalizado.

Lista de reproducción con pestañas

Lista de reproducción con pestañas **

Seleccione una pestaña en la navegación con pestañas para cambiar entre listas de reproducción. Seleccione un video dentro de una lista de reproducción para iniciar la reproducción de video.

Reproducciones de video en todo momento

Reproducciones de video en todo momento

El siguiente reproductor incluye una lista de reproducción para mostrarle que el código utilizado para recuperar todas las vistas de tiempo funcionará con las listas de reproducción. También funcionará con un solo reproductor de video.

Video antes de la lista de reproducción

Video antes de la lista de reproducción

Cree un reproductor habilitado para listas de reproducción para comenzar con un video que no esté en la lista de reproducción.

 

Video al final de la lista de reproducción

Video al final de la lista de reproducción

Ves que la lista de reproducción tiene tres videos. Después de reproducir esos tres vídeos, se reproducirá otro vídeo NO en la lista de reproducción. Una vez que se reproduce el video que no está en la lista de reproducción, la reproducción del video se detiene.

 

Ajustador de velocidad de reproducción

Agregue un botón de velocidad de reproducción a la barra de control de Brightcove Player.

 

Vídeo de fondo

Vídeo de fondo

Utilice un Brightcove Player para un video de fondo en su página web.

 

Tiempo de búsqueda

Tiempo de búsqueda

Al hacer clic en la barra de búsqueda, verá las horas en las que hizo clic debajo del reproductor.

Barra Marcadores de capítulo en curso

Barra Marcadores de capítulo en curso

Cree marcadores en la barra de progreso para mostrar los capítulos definidos.

Pantalla final personalizada dinámica

Pantalla final personalizada dinámica

Agregue un enlace asociado con datos de video en la pantalla final personalizada.

¿Sigues observando?

¿Sigues observando?

En este tema, aprenderá cómo crear un Brightcove Player que detecta cuando el espectador ha dejado de mirar mientras deja el video en reproducción.

Agrandar Jugador al pasar el ratón

Agrandar Jugador al pasar el ratón

En este tema, aprenderá a usar JavaScript y CSS para agrandar un reproductor pequeño cuando pasa el mouse sobre él, y luego reducirlo a un tamaño pequeño cuando lo apaga.

Jugador flotante

Jugador flotante

En este tema, aprenderá cómo configurar HTML / CSS / JavaScript para permitir que el reproductor sea arrastrado a una nueva posición. La posición del jugador permanecerá fija incluso cuando el usuario se desplace hacia arriba y hacia abajo en la página.

Obras limitadas

Obras limitadas

En este tema, aprenderá a usar un Brightcove Player que limita la cantidad de veces que un usuario puede ver un video en un solo día.

Regístrese para jugar

Regístrese para jugar

En este tema, aprenderá cómo usar un Brightcove Player donde el usuario debe completar un formulario para ver el video.

Regístrate para jugar tras la vista previa

Regístrate para jugar tras la vista previa

En este tema, aprenderá a usar un Brightcove Player en el que el usuario debe completar un formulario para ver el video, después de que se muestre una breve vista previa.

Contraseña para ver vídeo

Contraseña para ver vídeo

En este tema, aprenderá cómo solicitar una contraseña para ver el video.

Alternar barra de control

Alternar barra de control

En este tema, aprenderá cómo hacer que un botón cambie la visualización de la barra de control.

Botones de avance y retroceso

Botones Atrás Adelante

En este tema, aprenderá a colocar botones en la barra de control que retroceden y avanzan el video una cantidad específica de segundos.

Agregar marca de país a la etiqueta de subtítulo

Agregar marca de país a la etiqueta de subtítulo

En este tema, aprenderá cómo agregar la bandera de un país delante de la etiqueta del título del país.

Descargar transcripción

Descargar transcripción

En este tema, aprenderá a utilizar el archivo WebVTT de subtítulos y a convertirlo en una transcripción descargable.

Descargar audio

Descargar audio

En este tema, aprenderá cómo crear un enlace para permitir descargar la mejor calidad MP4 de un activo de audio que se reproduce en Brightcove Player.

Establecer el idioma de los subtítulos

Establecer automáticamente el idioma de subtítulos

En este tema, aprenderá a configurar el idioma de subtítulos predeterminado según el idioma del navegador.

Establecer el idioma de la pista de audio

Establecer automáticamente el idioma de la pista de audio

En este tema, aprenderá a configurar el idioma predeterminado de la pista de audio según el idioma del navegador.

Establecer el idioma de la pista de audio

Vídeo vertical

En este tema, aprenderá a mostrar un video vertical con Brightcove Player.