Inicio > Brightcove > Tutorial de Custom Player de Brightcove 1ra Parte.

Tutorial de Custom Player de Brightcove 1ra Parte.

Este tutorial consta de 3 partes.
Brightcove es una plataforma de video que se basa en tres componentes principales:

  • Media que administra los videos crea playlist y los relaciona con los players.
  • Publishing que administra los players (para crear, editarlos o darles un estilo personalizado)
  • Advertising que administra la publicidad en los videos y players(controla, configura y activa)

Este tutorial abarca un poco de BEML y el API del Player de Brightcove

Antes de empezar.

En la consola despues de subir el video, tenemos que crear un playlist y agregar manualmente el video que se desea ver en el playlist esto se hace en el modulo de Media de la consola de Brightcove para mas información sobre como hacer esto pueden visitar el sitio de developer de Brightcove o visitar el getting starter del modulo media.

Creación del player.

A pesar de que Brightcove (BC) maneja la posibilidad de crear diferetnes templates de player y poderles dar estilos de color forma y tamaño, agregar listas (1 o varias), o agregar thumbnails, hay ocasiones en que necesitamos la creacion de un player diferente a lo que las opciones de BC nos ofrecen, en la imagen podemos ver la arquitectura de un player de BC

Elementos que componen a un player de BC

Elementos que componen a un player de BC

  • IMAGE Para la inclusion de un banner publicitario en la parte superior.
  • VIDEOPLAYER es el player y elemento principal se compone del video y los controles
  • TABBAR es en donde apareceran en forma de tabs los playlist relacionados con el player
  • LIST es la lista de videos relacionados al playlist seleccionado
  • LABEL en donde aparece el titulo y descripción del video
  • LINK Liga del video
  • IMAGE Para la inclusion de banner publicitario

ir a la explicacón de los players de Brightcove

como lo que vamos a hacer es crear controles para el manejo de video (play, pause, stop, mute, link, share) personalizados y con diseño diferente a los que trae ya por default BC, entonces crearemos un player template derivado del template videoPlayer el cual solo tiene el vizualizador y los controles. Mas información sobre la creación de templates

Una vez creado el template, necesitamos dejarlo solo con la pura pantalla y quitarle los controles, para esto Brightcove nos ofrece un lenguaje de marcado llamado BEML (Brgightcove experience markup language), BEML es un lenguaje que nos permite especificar los elementos de un playe por marcas o etiquetas, para especificarle la etiqueta seleccionamos el template que acabamos de crear y le damos clic en el boton de editar, al darle click nos aparecerá una ventana en donde esta el nombre, la descripcion, las medidas (alto y ancho) y el codigo fuente del template, en este caso es:

<Runtime>
<Theme name=”Deluxe” style=”Light”>
<Style id=”default”><![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 10;}.linkText {fontSize: 10;}]]></Style>
</Theme>
<Labels>
<label key=”controls play”>toca el video!</label>
</Labels>
<Layout id=”application” width=”798″ height=”603″ boxType=”vbox” padding=”6″ gutter=”4″>
<HBox height=”406″ gutter=”6″>
<VideoPlayer id=”videoPlayer” width=”480″ video=”{videoList.selectedItem}”/>
</HBox>
<VBox gutter=”15″>
<HBox height=”32″>
<Spacer width=”6″/>
<VBox>
<TitleLabel height=”24″ width=”765″ id=”videoTitle” text=”{videoPlayer.video.displayName}” selected=”true” size=”18″ truncate=”true”/>
</VBox>
</HBox>
</VBox>
</Layout>
</Runtime>

No voy a entrar en detalles sobre BEML pero para una referencia completa pueden visitar la página de BEML que esta en el centro de ayuda de Brightcove ir ahora

Lo que si voy a cometnar es lo que bamos a cambiar

<Runtime>
<Theme name=”Deluxe” style=”Light”/>
<Layout>
<VBox padding=”3″>
<VideoDisplay id=”videoPlayer”/>
</VBox>
</Layout>
</Runtime>

Como lo unico que necesitamos es el display del video entonces borramos los elementos adicionales y cambiamos la etiqueta

<VideoPlayer id=”videoPlayer” width=”480″ video=”{videoList.selectedItem}”/>

por esta otra

<VideoDisplay id=”videoPlayer”/>

Básicamente la etiqueta VideoPlayer contiene al display y a los controles, como los controles los vamos a hacer personalizados entonces solo necesitamos el player con el display del video.

Una vez creado el template vamos a crear un player que derive de ese template que acabamos de crear.

Configuración del player

Una vez creado el template y el player necesitamos especificar ciertas caracteristicas, Brightcove nos ofrece la posibilidad de accesar a los eventos y propiedades del player por medio del API del Player que podemos programar por medio de ActionScript y Javascript para mas informacion sobre todos los eventos y propiedades del player pueden visitar la pagina del api del player de BC

Entonces seleccionamos el player que acabamos de crear y le damos click en el boton de settings, en la vetnana que nos aparece y en la pestaña de GLOBAL nos aseguramos que este palomeada la opcion de enable ActionScript/JavaScript APIs esto es muy importante ya que si no esta habilitada esta opcion no vamos a poder extraer informacion del player ni disparar eventos (start, pause, stop) que es lo que necesitamos para nuestros controles personalizados.

Despues en la pestaña de VIDEOPLAYER vamos a configurar lo siguiente:

En la parte de Auto play vamos a desactivar la opcion de Automatically page video on page load
En la parte de Brightcove Branding vamos a palomear la opcion de Disable Brightcove menu
En la parte de Overlay menu vamos a palomear la opcion de disavle overlay menu
Y finalmente en la parte de viral promotion tools vamos a palomear las tres opciones que aparecen.

Despues grabamos los cambios.

Bien con esto finalizamos la primer parte que corresponde a la parte de la consola de Brightcove la segunda parte de este tutorial cubrirá todo lo relacionado del lado de la programacion flash, la inclusion del player y el cargado y reproducción del video.

ir a segunda parte

Categorías:Brightcove Etiquetas: , , , ,
  1. abril 14, 2009 a las 5:14 pm

    Muy buena Explicación.

    Cuanto deberemos esperar por la segunda parte?

  2. Juan
    abril 17, 2009 a las 2:47 pm

    Listo ya esta la segunda parte, una disculpa por la tardanza pero he estado con mucho trabajo, espero publicar la tercer parte mas pronto
    Saludos!

  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: