Questo articolo è stato scritto e inviato da uno sviluppatore esterno. Il team dell'API di YouTube ringrazia Ben Longoria per il tempo e le competenze a sua disposizione.
Ben Longoria, University of Wisconsin - Madison, Academic Technology
Febbraio 2009
- Introduzione
- La via della terra
- Utilizzo di Movie.as
- Utilizzo di MovieSprite.as
- Che cosa posso chiamare? Cosa posso ricevere?
- Conclusione
Introduzione
Figura 1: demo del player Chromeless di TubeLoc
Wow. In circa un mese, al momento della stesura di questo articolo, l'API di YouTube Player avrà un anno. Quanti anni Internet sono? Sono stati creati numerosi ottimi progetti sull'API. Devi solo seguire il blog dell'API YouTube Developer per vedere che ci sono tantissime persone che hanno utilizzato molto bene questo prodotto.
Le serie di applicazioni del player API di YouTube sono scritte in JavaScript 2 e, sebbene ciò rimanga un ottimo linguaggio da utilizzare, molte persone utilizzano ActionScript 3 e/o Flex. Il problema è che si devono fare alcuni cerchi per far sì che le applicazioni Adobe 2 comunichino con le applicazioni di questo tipo. "Ma aspetta...credo di aver già sentito questa domanda, non c'è già qualcosa per questo?" potresti chiedertelo.
Molti utenti hanno già trovato il modo di farlo e hanno gentilmente lasciato il segno nei forum per gli sviluppatori dell'API di YouTube. Sono stati introdotti anche i progetti AS3 Chromeless Wrapper e Flex Embedded Player per semplificare l'utilizzo degli sviluppatori.
Volevo un modo semplice e semplice per riutilizzare la funzionalità Player API solo in JavaScript 3 o MXML. Una classe senza Flex per i progetti Flex-allergici e un componente Flex facile da usare per questi progetti. TubeLoc ha soddisfatto entrambi i requisiti
TubeLoc (un mashup di YouTube e LocalConnection) è una libreria di JavaScript 3 che funge da adattatore per l'API YouTube Player 2 di YouTube. Puoi aggiungere facilmente la funzionalità video di YouTube alle applicazioni HTTPS 3 o Flex con i player di YouTube full-chrome o chromeless. TubeLoc utilizza la classe LocalConnection per comunicare con un file SWF del mediatore HTTPS 2. Il file SWF di JavaScript 2 comunica con il player ufficiale dell'API di YouTube. Quindi, come si utilizza questa cosa?
Il livello della terra
Per prima cosa, devi scaricare la release corrente della libreria dal progetto Google Code. Dopo aver decompresso l'archivio ZIP delle release, troverai una directory as3 al suo interno. Sotto questa è riportata la directory src, che include alcune classi di esempio. Puoi utilizzarli come punto di partenza. Nella directory src sono presenti due file all'interno di com/enefekt/tubeloc. Movie.as è lo strumento che puoi utilizzare nei tuoi progetti Flex, mentre MovieSprite.as è lo strumento che puoi utilizzare nei tuoi progetti JavaScript 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 a utilizzare gli esempi di questo tutorial, assicurati che la directory src nella directory as3 sia nel percorso del corso. Il processo varia a seconda dello strumento di sviluppo, quindi consulta la documentazione dell'ambiente di sviluppo.
Dopo aver compilato la demo o l'applicazione, avrai bisogno del file SWF 2 di JavaScript che comunica con l'API del player di YouTube. Questo file SWF è disponibile nell'archivio di release qui: as3/lib/as2_tubeloc.swf. Assicurati che sia accanto al file HTML che incorpora la tua applicazione SWF, in questo modo:
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.
Usare Movie.as
Vediamo come utilizzare la versione Flex di TubeLoc. Esamineremo prima il player di Chrome completo (con tutti i controlli), poi il player chromeless di BYOC. Ecco come utilizzare il player di Chrome completo in MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Lo so, è doloroso, vero? Assolutamente no. Cerchiamo di impazzire e fare il chromeless:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Stiamo aggiungendo la stessa difficoltà a un altro attributo: ecco fatto. Quindi, l'intero file MXML avrà il seguente aspetto:
<?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 esamineremo gli elementi disponibili per l'impostazione e la chiamata a questo componente.
Usare MovieSprite.as
Ora diamo un'occhiata a come utilizzare la versione JavaScript 3 di TubeLoc. Questa versione non richiede classi del framework Flex e utilizza solo classi native di Flash Player. Vedremo prima come impostare il player di Chrome completo e poi il player di Chrome. 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, vengono importate le classi TubeLoc necessarie. Quindi, nel costruttore, creiamo un'istanza della classe MovieSprite e trasmettiamo il nostro ID video nel costruttore di MovieSprite. Poi aggiungiamo un listener di eventi per PlayerReadyEvent. Le dimensioni del filmato vengono impostate nel gestore di eventi onPlayerReady. Nota: stiamo utilizzando il player di Chrome completo e stiamo quindi usufruendo di una proprietà statica CHROME_HEIGHT nella classe MovieSprite. Questo ci aiuta a dimensionare il film tenendo in considerazione l'altezza di Chrome.
Ok, che ne 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");
}
}
}
Quali sono le differenze? Nel costruttore, trasmettiamo null per l'ID video e il secondo parametro true indica alla classe MovieSprite che stiamo senza Chrome. Noterai anche una differenza nel gestore di eventi onPlayerReady. Qui carichiamo il nostro video per ID, utilizzando il metodo loadVideoById.
Cosa posso chiamare e cosa posso fare?
Quindi, quali sono tutti gli argomenti da chiamare e con quali eventi dobbiamo lavorare? Nell'archivio delle release che hai scaricato è presente la documentazione completa sul codice per ottenere i dettagli. In breve, sia per Movie.as che per MovieSprite.as sono disponibili i seguenti metodi:
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
Ecco gli eventi a cui puoi iscriverti. Puoi trovare ulteriori dettagli nella documentazione.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusione
Spero che questo articolo ti abbia aiutato a integrare funzionalità e contenuti di YouTube nelle tue applicazioni Flash. Esiste un limite da tenere presente durante lo sviluppo con TubeLoc: non puoi avere due giocatori di YouTube sul palco contemporaneamente.
Ci auguriamo che questo problema venga risolto entro i tempi previsti. Pertanto, se trovi bug o mancano alcune funzionalità, visita il progetto Google Code e segnalalo nello strumento Issue Tracker. Grazie per l'attenzione.
Biografia dell'autore
Ben Longoria è una sviluppatore di applicazioni accademiche per l'Università del Wisconsin-Madison. Ha sviluppato con Flash dal primo Flash e con Flex 2 dalla versione Flex 2. Negli ultimi 2 anni ha anche sviluppato applicazioni basate su Mozilla. Ha lavorato a diversi progetti accademici e universitari, incluse le applicazioni multipiattaforma destinate sia al browser sia al desktop. Svolge un ruolo attivo nella progettazione di interfacce e interazioni e apprezza la sfida di creare software utilizzabile. Puoi trovare il suo blog all'indirizzo http://enefekt.com/sansbrowser/ e leggere i suoi contributi a InsideRIA.
Questa opera è autorizzata ai sensi della licenza Creative Commons Attribution 3.0 degli Stati Uniti.