Questo articolo è stato scritto e inviato da uno sviluppatore esterno. Il team dell'API YouTube ringrazia Ben Longoria per il tempo e le competenze che ci ha dedicato.
Ben Longoria, University of Wisconsin - Madison, Academic Technology
Febbraio 2009
- Introduzione
- The Lay of the Land
- Utilizzare Movie.as
- Utilizzare MovieSprite.as
- A quali numeri posso chiamare e cosa ricevo?
- Conclusione
Introduzione
Figura 1: demo di TubeLoc Chromeless Player
Wow. A partire da questo momento, tra circa un mese, l'API YouTube Player compirà un anno. Quanti anni di internet sono? Sono stati realizzati diversi progetti di grande valore sull'API. Basta seguire il blog dell'API YouTube per sviluppatori per rendersi conto che sono moltissime le persone che hanno realizzato grandi cose con questa API.
L'attuale insieme di applicazioni del player dell'API YouTube è scritto in ActionScript 2 e, anche se questo rimane un ottimo linguaggio, molte persone ora utilizzano ActionScript 3 e/o Flex. Il problema è che devi eseguire alcuni passaggi per consentire alle applicazioni ActionScript 2 di comunicare con le applicazioni ActionScript 3. "Ma aspetta…mi sembra di aver già sentito questa storia. Non esiste già qualcosa del genere?", potresti chiederti.
Un buon numero di persone ha già capito come farlo e ha gentilmente condiviso la propria esperienza nei forum degli sviluppatori dell'API di YouTube. Sono stati inoltre realizzati i progetti AS3 Chromeless Wrapper e Flex Embedded Player per semplificare l'utilizzo da parte degli sviluppatori.
Volevo un modo semplice e pratico per riutilizzare la funzionalità dell'API Player solo in ActionScript 3 o MXML. Un corso senza Flex per i progetti allergici a Flex e un componente Flex facile da usare per i progetti che lo amano. TubeLoc ha soddisfatto entrambi i requisiti
TubeLoc (un mashup di YouTube e LocalConnection) è una libreria ActionScript 3 che funge da adattatore per l'API YouTube Player ActionScript 2. Puoi aggiungere facilmente la funzionalità dei video di YouTube alle tue applicazioni ActionScript 3 o Flex con i player di YouTube con o senza riquadro. TubeLoc utilizza la classe LocalConnection per comunicare con un file SWF mediatore ActionScript 2. Il file SWF ActionScript 2 comunica con il player dell'API YouTube ufficiale. Come si usa?
The Lay of the Land
Innanzitutto, devi scaricare la release corrente della libreria dal progetto Google Code. Dopo aver decompreso l'archivio ZIP della release, troverai una directory as3. Sotto questa directory si trova la directory src che include alcuni corsi di esempio. Non esitare a utilizzarli come punto di partenza. Nella directory com/enefekt/tubeloc sono presenti due file.src Movie.as è ciò che puoi utilizzare nei progetti Flex e MovieSprite.as è ciò che puoi utilizzare nei progetti ActionScript 3. In com/enefekt/tubeloc/event sono presenti varie classi di eventi per le diverse notifiche che possono essere inviate dal player.
Prima di provare gli esempi in questo tutorial, assicurati che la directory src nella directory as3 sia nel percorso della classe. La procedura per farlo varia a seconda degli strumenti di sviluppo che utilizzi, quindi consulta la documentazione del tuo ambiente di sviluppo.
Una volta compilata la demo o l'applicazione, avrai bisogno del file SWF ActionScript 2 che comunica con l'API YouTube Player. Puoi trovare questo file SWF nell'archivio delle release qui: as3/lib/as2_tubeloc.swf. Assicurati che si trovi accanto al file HTML che incorpora l'applicazione SWF, come segue:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Nota: puoi modificare il percorso di questo file SWF utilizzando la proprietà playerWrapperUrl con la libreria.
Utilizzo di Movie.as
Vediamo come utilizzare la versione Flex di TubeLoc. Esamineremo prima il player con Chrome completo (con tutti i controlli) e poi il player chromeless BYOC. Ecco come utilizzare il player con riquadro completo in MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Lo so, lo so, è doloroso, giusto? Per niente. Facciamoci folli e proviamo a rimuovere la barra degli strumenti:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Aggiungeremo un altro attributo, ma non di più. Ecco l'intero file 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: nell'elemento mx:Application, aggiungiamo lo spazio dei nomi tubeloc con il pacchetto per il componente Movie. Dopodiché, possiamo utilizzare il componente come dimostrato. Più avanti vedremo cosa è possibile impostare e chiamare in questo componente.
Utilizzo di MovieSprite.as
Ora vediamo come utilizzare la versione di TubeLoc in ActionScript 3. Questa versione non richiede classi del framework Flex e utilizza solo le classi native di Flash Player. Esamineremo prima come utilizzare il player con riquadro completo e poi il player chromeless. Ecco un esempio 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;
}
}
}
Innanzitutto, importiamo i classi TubeLoc necessari. Poi, nel costruttore creiamo un'istanza della classe MovieSprite e passiamo l'ID video al costruttore di MovieSprite. Aggiungiamo un listener di eventi per PlayerReadyEvent. Nel gestore dell'evento onPlayerReady, impostiamo le dimensioni del film. Nota: poiché utilizziamo il player full-chrome, sfruttiamo una proprietà statica CHROME_HEIGHT nella classe MovieSprite. Questo ci aiuta a determinare le dimensioni del filmato tenendo conto dell'altezza del riquadro.
Ok, e che mi dici del player chromeless?
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");
}
}
}
Quindi, cosa cambia? Nel costruttore, passiamo null per l'ID video e il secondo parametro true indica alla classe MovieSprite che non utilizzeremo il riquadro. Noterai anche una differenza nel gestore eventi onPlayerReady. Qui carichiamo il video tramite ID utilizzando il metodo loadVideoById.
Che cosa posso chiamare e cosa ricevo?
Quindi, quali sono le chiamate disponibili e con quali eventi dobbiamo lavorare? Nell'archivio della release che hai scaricato è disponibile la documentazione completa del codice per ottenere i dettagli. Ecco una rapida panoramica dei metodi disponibili sia per Movie.as che per MovieSprite.as:
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
Oltre a questi metodi, nel componente Movie.as hai accesso alle seguenti proprietà:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Di seguito sono riportati gli eventi a cui puoi iscriverti. Puoi trovare ulteriori dettagli nella documentazione.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusione
Mi auguro che questo articolo ti abbia aiutato a integrare le funzionalità e i contenuti di YouTube nelle tue applicazioni Flash. Tieni presente una limitazione durante lo sviluppo con TubeLoc: non puoi avere due player di YouTube contemporaneamente nella scena.
Speriamo che il problema venga risolto in tempo. Pertanto, se riscontri bug o mancanze di funzionalità, visita il progetto Google Code e segnalalo nel tracker dei problemi. Grazie per l'attenzione.
Biografia dell'autore
Ben Longoria è uno sviluppatore di applicazioni accademiche per l'Università del Wisconsin-Madison. Sviluppa con Flash dalla versione 5 e con Flex dalla release di Flex 2. Negli ultimi due anni ha anche sviluppato applicazioni basate su Mozilla. Ben ha lavorato a diversi progetti didattici e accademici, tra cui applicazioni multipiattaforma destinate sia al browser che al computer. Svolge un ruolo attivo nel design dell'interfaccia e dell'interazione e apprezza la sfida di creare software utilizzabile. Puoi trovare il suo blog all'indirizzo http://enefekt.com/sansbrowser/ e leggere i suoi contributi su InsideRIA.
Questa opera è concessa in licenza ai sensi di una licenza Creative Commons Attribution 3.0 United States.