Un desarrollador externo escribió y envió este artículo. El equipo de la API de YouTube agradece a Ben Longoria por su tiempo y experiencia.
Ben Longoria, Universidad de Wisconsin - Madison, Tecnología Académica
Febrero de 2009
- Introducción
- El panorama
- Cómo usar Movie.as
- Cómo usar MovieSprite.as
- ¿Qué puedo llamar y qué obtengo?
- Conclusión
Introducción
Figura 1: Demostración del reproductor sin Chrome de TubeLoc
¡Vaya! En el momento en que se escribe este documento, la API de YouTube Player cumplirá un año. ¿Cuántos años de Internet son? Se crearon varios proyectos excelentes con la API. Solo tienes que seguir el Blog de la API de YouTube Developer para ver que hay muchas personas que han hecho grandes cosas con ella.
El conjunto actual de aplicaciones de reproductores de la API de YouTube está escrito en ActionScript 2 y, si bien sigue siendo un excelente lenguaje, muchas personas ahora usan ActionScript 3 o Flex. El problema es que debes realizar algunos pasos para que las aplicaciones de ActionScript 2 se comuniquen con las de ActionScript 3. Es posible que te preguntes: “Pero espera… Creo que ya escuché esto antes. ¿No hay algo para esto?”.
Muchas personas ya descubrieron cómo hacerlo y compartieron su sabiduría en los Foros para Desarrolladores de la API de YouTube. También se crearon los proyectos AS3 Chromeless Wrapper y Flex Embedded Player para facilitar su uso a los desarrolladores.
Quería una forma fácil y sencilla de volver a usar la funcionalidad de la API de Player solo en ActionScript 3 o MXML. Una clase sin Flex para los proyectos alérgicos a Flex y un componente de Flex fácil de usar para los proyectos que aman Flex. TubeLoc cumple con ambos requisitos.
TubeLoc (un mashup de YouTube y LocalConnection) es una biblioteca de ActionScript 3 que funciona como adaptador de la API de YouTube ActionScript 2 Player. Puedes agregar fácilmente la funcionalidad de video de YouTube a tus aplicaciones de ActionScript 3 o Flex con los reproductores de YouTube con o sin marco. TubeLoc usa la clase LocalConnection para comunicarse con un SWF de mediador de ActionScript 2. El SWF de ActionScript 2 se comunica con el reproductor oficial de la API de YouTube. ¿Cómo usamos esto?
El panorama
Primero, debes descargar la versión actual de la biblioteca del proyecto de Google Code. Después de descomprimir el archivo ZIP de la versión, encontrarás un directorio as3. Debajo de este, se encuentra el directorio src, que incluye algunas clases de muestra. No dudes en usarlos como punto de partida. En com/enefekt/tubeloc, en el directorio src, hay dos archivos. Movie.as es lo que puedes usar en tus proyectos de Flex, y MovieSprite.as es lo que puedes usar en tus proyectos de ActionScript 3. En com/enefekt/tubeloc/event, hay varias clases de eventos para las diferentes notificaciones que se pueden enviar desde el reproductor.
Antes de probar los ejemplos de este instructivo, asegúrate de que el directorio src en el directorio as3 esté en tu ruta de clase. El proceso para hacerlo es diferente según lo que uses para desarrollar, así que consulta la documentación de tu entorno de desarrollo.
Una vez que hayas compilado tu demo o aplicación, necesitarás el archivo SWF de ActionScript 2 que se comunica con la API de YouTube Player. Puedes encontrar este SWF en el archivo de lanzamiento aquí: as3/lib/as2_tubeloc.swf. Solo asegúrate de que esté junto al archivo HTML que incorpora tu aplicación SWF, de la siguiente manera:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Nota: Puedes cambiar la ruta de acceso a este SWF con la propiedad playerWrapperUrl de la biblioteca.
Cómo usar Movie.as
Veamos cómo usar la versión flexible de TubeLoc. Primero, analizaremos el reproductor con borde completo (con todos los controles) y, luego, el reproductor sin borde de BYOC. Así es como se usa el reproductor de Chrome completo en MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Lo sé, lo sé, es doloroso, ¿no? Para nada. Así que, hagamos lo siguiente:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Agregaremos un atributo más, eso es todo. Así es como se vería todo el archivo MXML:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
Nota: En el elemento mx:Application, agregamos el espacio de nombres tubeloc con el paquete para el componente Movie. Después de hacerlo, podemos usar el componente como se muestra. Más adelante, veremos qué está disponible para configurar y llamar a este componente.
Cómo usar MovieSprite.as
Ahora, veamos cómo usar la versión de ActionScript 3 de TubeLoc. Esta versión no requiere clases del framework de Flex y solo usa clases nativas de Flash Player. Primero, veremos cómo crear el reproductor con borde completo y, luego, el reproductor sin borde. Este es un ejemplo completo:
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
Primero, importamos las clases de TubeLoc necesarias. Luego, en el constructor, creamos una instancia de la clase MovieSprite y pasamos nuestro ID de video al constructor de MovieSprite. A continuación, agregamos un objeto de escucha de eventos para PlayerReadyEvent. En el controlador de eventos onPlayerReady, configuramos el tamaño de la película. Nota: Como usamos el reproductor de Chrome completo, aprovechamos una propiedad estática CHROME_HEIGHT en la clase MovieSprite. Esto nos ayuda a ajustar el tamaño de la película teniendo en cuenta la altura del marco.
Muy bien. ¿Qué sucede con el reproductor sin bordes?
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
Entonces, ¿qué es diferente? En el constructor, pasamos null para el ID de video, y el segundo parámetro true le indica a la clase MovieSprite que no usaremos el navegador Chrome. También notarás una diferencia en el controlador de eventos onPlayerReady. Aquí es donde cargamos nuestro video por ID con el método loadVideoById.
¿A qué número puedo llamar? ¿Qué obtengo?
¿Qué podemos llamar y con qué eventos tenemos que trabajar? En el archivo de lanzamiento que descargaste, hay documentación completa del código para obtener los detalles. Como resumen rápido, para Movie.as y MovieSprite.as, tienes estos métodos:
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
Además de estos métodos, en el componente Movie.as, tienes acceso a estas propiedades:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Estos son los eventos a los que puedes suscribirte. Puedes encontrar más detalles en la documentación.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusión
Espero que este artículo te haya ayudado a integrar la funcionalidad y el contenido de YouTube en tus aplicaciones para Flash. Ten en cuenta que, mientras desarrollas con TubeLoc, no puedes tener dos reproductores de YouTube en el escenario al mismo tiempo.
Esperamos que esto se solucione a su debido tiempo. Por lo tanto, cuando encuentres errores o funciones faltantes, visita el proyecto de código de Google y, luego, infórmalo en la herramienta de seguimiento de errores. ¡Gracias por leer esta información!
Biografía del autor
Ben Longoria es desarrollador de aplicaciones académicas para la Universidad de Wisconsin-Madison. Desarrolla con Flash desde la versión 5 y con Flex desde el lanzamiento de Flex 2. Durante los últimos 2 años, también ha estado desarrollando aplicaciones con tecnología de Mozilla. Ben trabajó en varios proyectos educativos y académicos, incluidas aplicaciones multiplataforma orientadas al navegador y a la computadora de escritorio. Participa activamente en el diseño de interfaces y de interacciones, y disfruta del desafío de crear software utilizable. Puedes encontrar su blog en http://enefekt.com/sansbrowser/ y leer sus contribuciones a InsideRIA.
Este trabajo cuenta con la licencia Atribución 3.0 de Estados Unidos de Creative Commons.