Inicio > Brightcove, Flash > Tutorial de Custom Player de Brightcove 2da Parte de 3.

Tutorial de Custom Player de Brightcove 2da Parte de 3.

Brightcove ofrece la posibilidad de accesar a sus 3 componentes (Media, Pubilshing y Advertising) por medio de API’s.

Una vez creado el player (ver parte uno de este tutorial), lo que debemos hacer es obtener el codigo para publicar el player dentro de nuestra pelicula Flash, La consola de Brightcove ofrece 4 formas distintas para publicar nuestro player:

  • JavaScript, nos genera el codigo javascript necesario para incrustarlo en una pagina html.
  • ActionScript, nos genera codigo actionscript 3.0 para insertarlo en un archivo AS.
  • HTML, nos genera codigo HTML para publicarlo en sitios que no acepten codigo javascript como es el caso de myspace o facebook que tienen sus propias maneras para manejar los escripts.
  • Publishing URL, nos genera la URL para ligar el player desde cualquier sitio, email, blog.

Para mas información acerca de los métodos de publicación y como hacerlo  visitar esta liga.

Una vez que tenemos el codigo de publicación en ActionScript, vamos a crear un arhivo nuevo de tipo AS y lo vamos a pegar ahi,  y lo vamos a guardar con el nombre de BrightcovePlayer.as

La estructura de los movieclips que vamos a utilizar es la siguiente:

Nombres de las instancias (click para ver en grande)

Nombres de las instancias (click para ver en grande)

EL Player API

El Player API se usa para presonalizar, integrar con aplicaciones y agregar funcionalidad a los players de Brightcove, permite accesar y controlar a el player y a sus componentes por medio de JavaScript o ActionScript, utilizando las  propiedades, métodos y eventos con los que podemos manipular los controles del  player,  y los videos que es el tema de este tutorial,  para una referencia completa de los métodos y eventos que soporta cada componente visitar http://help.brightcove.com/developer/docs/playerapi/PlayerAPI/index.html.
*(Hay que recordar que debemos tener activa la casilla del API del player visto en la parte 1 de este tutorial)

El API se divide de módulos para mejor organización de los métodos y eventos, los que vamos a utilizar en este tutorial son:  El módulo de experiencia, el módulo de menu y el módulo de video player.
A continuación listo los  modulos del Player API si quieren conocer mas a fondo cada uno den click:

AdvertisingModule API para manejo de caracteristicas de anuncio.
APIModule Clase abstracta para todos los modulos.
ContentModule API para manejo de la obtención de contenido.
CuePointsModule API para manejo de cue points en el video.
ExperienceModule API para manejo de reproducción del video.
MenuModule API para manejo de la iteracción del menu (controles).
SearchModule API para manejo de métodos de busqueda.
SocialModule API para manejo de características sociales.
VideoPlayerModule API para manejo de reproducción de video.

Entonces recapitulando:

En Brightcove Studio:

  • Obtener el codigo de publicación.
  • Habilitar las APIs
  • Obtener Id de un video.

En Flash/ActionScript

  • Crear BrightcovePlayer.as (en la misma carpeta o en otra pero especificando el classpath en la pelicula)
  • Obtener referencias a los componentes del player.
  • Cargar el contenido.
  • Escuchar por interacciones del usuario.

En la programación para el API

  • Crear el objeto experiencia
  • Escuchar el onTemplateLoaded
  • Escuchar onTemplate Ready
  • Escuchar onContentLoad
  • Escuchar onVideoLoad

A tirar código (por fin)

Para empezar hay que bajar el archivo con el que vamos a trabajar lo pueden bajar de http://www.juan-anzaldo.com/blog/tutorialBCCustomControls/player_a.zip, ya esta estructurado para que solo tengamos que escribir el codigo.

Abrimos el archivo player_a.fla y si se fijan la estructura es igual a la imagen mostrada previamente, vamos a localizar el layer BCPlayer que esta en la siguiente ruta player_mc->videoDisplay_mc y en el primer keyframe vamos a escribir el código necesario para crear los objetos con los que vamos a referenciar a los modulos y luego crearemos una instancia llamada player  de la clase de BrightcovePlayer y despues lo agregaremos al movieclip con el método addChild. Todo esto repito en el keyframe del  layer del movievlip videoDisplay:

var mPlayer:Object;
var mContent:Object;

var mExp:Object;
var mMenu:Object;
var player:BrightcovePlayer = new BrightcovePlayer();
addChild(player);

Una vez escrito esto debemos crear un listener para el primer evento que se dispara cuando instanciamos la clase BrightcovePlayer que es el de templateLoaded. y lo escribimos así:

player.addEventListener(“templateLoaded”, onTemplateCargado);

Este evento es el primero que se dispara cuando creamos la instancia player,   una vez disparado, creamos las referencias a los demas modulos que necesitamos (para controlar los botones y tocar el video) y creamos ademas  otro listener para saber cuando el template esta listo,  templateReady, este evento es disparado cuando el player termina de inicializarse y esta listo para una interacción completa.

function onTemplateCargado(evento:Event):void
{
trace (“01. Se cargo el template”);
mPlayer = player.getModule(“videoPlayer”);
mContent = player.getModule(“content”);
mExp = player.getModule(“experience”);
mMenu = player.getModule(“menu”);
mExp.addEventListener (“templateReady”, onTemplateListo);
}

Despues crearemos la funcion que se ejecuta una vez que el evento templateReady es disparado y crearemos dos listeners una para cuando se carge el contenido y el otro para cuando se carge el video.

function onTemplateListo (evt:Event):void
{
mExp.addEventListener (“contentLoad”, contenidoCargado);
mContent.addEventListener (“mediaLoad”, videoCargado);
}

contentLoad Se dispara cuando el player cargó los metadatos del contenido inicial.

mediaLoad Se dispara cuando el video es cargado por medio del método getMediaAsynch.

Cargar contenido se logra llamando funciones del Content module, el player carga el contenido programado a el, este contenido puede ser obtenido de manera sincrona usando el metodo getMedia. Pero como en este caso queremos obtener contenido de la base de datos que no ha sido cargada al player, debemos hacer una petición asincrona, utilizaremos el método getMediaAsynch y lo utilizaremos dentro de  la función  contenidoCargado (manejadora del evento contentLoad del modulo de experiencia), además agregaremos dos listeners mas que pertenecen al módulo de VideoPlayer:  mediaBufferBegin mediaBufferComplete, el primer evento se va a disparar cuando empieza a guardar en el buffer del video actual pausando la reproducción del video  y el segundo se dispara cuando termina el almacenamiento del  buffer del video y continua la reproducción, estos eventos son importantes para indicar al usuario que esta viendo el video que el contenido se esta cargando y tenga la retroalimentacion adecuda.

function contenidoCargado(evento:Event):void
{

trace (“02. Se cargo el contenido”);
mContent.getMediaAsynch(123456789,”id”);  <—– escribe  el numero de  id de video correcto de tu consola Brightcove
mPlayer.addEventListener(“mediaBufferBegin”,comienzaBuffer);
mPlayer.addEventListener(“mediaBufferComplete”,terminaBuffer);
}

El método getMediaAsynch recibe dos parametros, el primer parametro es el id del video que queremos tocar, y el segundo pueden ser dos valores (“id” ó “referenceId”) depende de como solicitemos el video, aclarando que si es por medio de referenceId entonces el primer parametro debe ser un valor de tipo  texto osea entrecomillado y si es id el valor es numerico.

Y finalmente para esta parte del tutorial escribimos los manejadores para los otros dos eventos que necesitamos mediaBufferBegin y mediaBufferComplete, lo unico que hacen estas funciones es poner visible e invisible el movieclip de buffering. Y tambien escribir el manejador para el evento mediaLoad del modulo de content definido en la funcion  onTemplateListo.

function comienzaBuffer (evt:Event):void
{
trace (”      Comienza el buffering.”);
MovieClip(this.parent).buffering_mc.visible = true;
}
function  terminaBuffer (evt:Event):void
{
trace (”      Termina el buffering.”);
MovieClip(this.parent).buffering_mc.visible = false;
}

function videoCargado(evento:Event):void
{
trace (“03. Se cargo el video.”);
}

El evento mediaLoad sirve para saber cuando  se cargo la DTO del video desde el servidor y esta listo para ser visto.

El player recive los datos desde el servidor en forma de transferencia de objetos de datos (DTOs, Data Transfer Objects). Cada uno de esos objectos contiene una colección de propiedades que tienen los metadatos para el video, playlist u otro objeto. Todos los valores son obtenidos pero no puestos,  para mas información ver esta liga

Bien, si todo está correctamente entonces debe de verse de la siguiente manera (con su video).

http://www.juan-anzaldo.com/blog/tutorialBCCustomControls/tutorialBGCustomControls_parte1.html

Si no, entonces pongan el comentario de cual es su problema y trataré de ayudarlos,

en la siguiente parte de este tutorial mostraré la programación para los botones que van a manipular a el player.

Categorías:Brightcove, Flash
  1. abril 23, 2009 a las 1:24 pm

    hola. me pregunto si sabrás cómo se puede modificar el tamaño de un player en el brightcove 3. en el 2 no tenía problema, pero he estado toda esta jornada intentando entender cómo hacerlo con el 3, hasta que llegué acá y me pregunto si podrás ayudarme. gracias!!!

  2. abril 23, 2009 a las 1:42 pm

    Pues lo mas sencillo es :
    1. Te logeas en la consola (http://studio3.brightcove.com/)
    2. Te vas al modo de publishing.
    3. Seleccionas el template que quieres utilizar y le das click en la opcion duplicar, se va a generar un nuevo templete con el mismo nombre pero adicionalmente la palabra copy.
    4. lo seleccionaes y le das click en el boton de edit
    5. En la ventana que te sale especificas el nombre, la descripcion y del lado derecho esta para que configures el ancho y el alto y adicionalmente el codigo BEML para que lo modifiques en caso de ser necesario, si no conces al respecto dejalo tal como esta.
    6 Le das click en save changes y listo!

    Espero te ayude

  3. Mari
    octubre 21, 2009 a las 2:11 am

    Hola, para cuando la tercera parte? acabo de empezar a usar brightcove y estoy interesada en crear mi propio diseño del player. Pero no se por donde empezar con la generación de las acciones y eventos de la barra de control. Muchas gracias.

  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: