Este artículo fue escrito y enviado por un programador externo. El equipo de la API de YouTube agradece a Ben Longoria por su tiempo y experiencia.
Ben Longoria, Universidad de Wisconsin - Madison, Academic Technology
Febrero de 2009
- Introducción
- La tierra de los hechos
- Cómo usar Movie.as
- Usa MovieSprite.as
- ¿Cómo puedo llamar?, ¿qué obtengo?
- Conclusión
Introducción
Figura 1: Demostración de reproductor sin bordes de TubeLoc
¡Vaya! En apenas un mes, a partir de este momento, la API del reproductor de YouTube tendrá un año de antigüedad. ¿Cuántos años de Internet es eso? Se crearon varios proyectos excelentes mediante la API. Solo tienes que seguir el blog de la API de YouTube para programadores para ver que hay un montón de personas que han hecho grandes cosas con esto.
El conjunto actual de aplicaciones de reproductor de la API de YouTube está escrito en ActionScript 2 y, si bien sigue siendo un excelente lenguaje para usar, muchas personas ahora utilizan ActionScript 3 o Flex. El problema es que debe saltar algunos pasos para que las aplicaciones de ActionScript 2 se comuniquen con las de ActionScript 3. "Pero... esperen. Creo que ya escuché esto... ¿no existe algo para esto?", se lo preguntarán.
Muchas personas ya han descubierto cómo hacerlo y decidieron compartir sus conocimientos con los foros de desarrolladores de la API de YouTube. También se incluyeron los proyectos AS3 Chromeless Wrapper y Flex Embedded Player para facilitar el uso de los desarrolladores.
Quería una manera simple y simple de reutilizar la API del reproductor solo en ActionScript 3 o MXML. Una clase libre de Flex para esos proyectos alérgicos de Flex y un componente de Flex fácil de usar para esos proyectos amantes de Flex. TubeLoc cumplió con ambos requisitos
TubeLoc (un mashup de YouTube y LocalConnection) es una biblioteca ActionScript 3 que funciona como adaptador para la API del reproductor ActionScript 2 de YouTube. Puedes agregar con facilidad la funcionalidad de video de YouTube a tus aplicaciones ActionScript 3 o Flex con los reproductores sin bordes de YouTube o los de Chrome completo. TubeLoc usa la clase LocalConnection para comunicarse con un SWF mediador de ActionScript 2. El archivo SWF de ActionScript 2 se comunica con el reproductor oficial de la API de YouTube. ¿Cómo usamos esto?
La Tierra
Primero, debes descargar la versión actual de la biblioteca desde el proyecto de Google Code. Después de descomprimir el archivo ZIP de la actualización, encontrarás un directorio as3 en él. Debajo de este, se encuentra el directorio src, que incluye algunas clases de muestra. Puede 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 flexibles, 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 del directorio as3 esté en la ruta de tu clase. El proceso para hacerlo es diferente según el entorno de desarrollo, por lo que debes consultar la documentación de tu entorno de desarrollo.
Una vez que hayas compilado tu demostración o aplicación, necesitarás el archivo SWF de ActionScript 2 que se comunicará con la API del reproductor de YouTube. Puedes encontrar este SWF en el archivo de la versión aquí: as3/lib/as2_tubeloc.swf. Solo debes asegurarte de que esté junto al archivo HTML que inserta tu aplicación SWF, por ejemplo:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Nota: Puedes cambiar la ruta de acceso a este SWF mediante la propiedad playerWrapperUrl con la biblioteca.
Uso de Movie.as
Veamos cómo usar la versión flexible de TubeLoc. Veremos el reproductor Chrome completo (con todos los controles) y, luego, el reproductor sin bordes BYOC. Así se usa el reproductor Chrome completo en MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Lo sé, lo sé, me duele, ¿no? Para nada. Así que vuélvenos locos y hazlo sin bordes:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Vamos a aumentar el esfuerzo con 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 esto, podemos usar el componente como se muestra. Más adelante, veremos lo que está disponible para configurar y llamar en este componente.
Uso de MovieSprite.as
Ahora veamos cómo usar la versión ActionScript 3 de TubeLoc. Esta versión no requiere clases del marco de trabajo Flex y solo usa clases nativas de Flash Player. Primero, veremos cómo realizar la reproducción con el reproductor Chrome completo y, luego, el reproductor sin bordes. A continuación, se muestra 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 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, establecemos el tamaño de la película. Nota: Debido a que usamos el reproductor de Chrome completo, estamos aprovechando la 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 cromo.
¿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");
}
}
}
¿En qué se diferencia? En el constructor, pasamos null para el ID de video, y el segundo parámetro true le indica a la clase MovieSprite que no aplicaremos bordes. 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.
¿Cómo puedo llamar?, ¿qué obtengo?
Entonces, ¿qué todo está disponible para llamar y con qué eventos tenemos que trabajar? En el archivo de lanzamiento que descargaste, encontrarás documentación completa sobre el código para obtener los detalles. A modo de descripción general, 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 las siguientes 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
Esperamos que este artículo te haya ayudado a integrar la funcionalidad y el contenido de YouTube en tus aplicaciones Flash. Existe una limitación que debes tener en cuenta cuando desarrollas con TubeLoc: no puedes tener dos reproductores de YouTube en el escenario al mismo tiempo.
Esperamos solucionar este problema a tiempo. Por lo tanto, cuando encuentres errores o falta alguna función, visita el proyecto Google Code e infórmanos en el seguimiento de problemas. ¡Gracias por leer esta información!
Biografía del autor
Ben Longoria es desarrollador de aplicaciones académicas de la Universidad de Wisconsin-Madison. Está desarrollando con Flash desde Flash 5 y Flex desde el lanzamiento de Flex 2. En los últimos 2 años, también desarrolló aplicaciones con tecnología Mozilla. Benjamín ha trabajado en varios proyectos educativos y académicos, como aplicaciones multiplataforma orientadas tanto al navegador como a las computadoras de escritorio. Ocupa un papel activo en el diseño de interfaces e interacciones, y disfruta el desafío de crear software utilizable. Puedes encontrar el blog en el sitio http://enefekt.com/sansbrowser/ y leer sus contribuciones a InsideRIA.
Esta obra tiene licencia de la Atribución 3.0 de Creative Commons de Estados Unidos.