Cet article a été rédigé et envoyé par un développeur externe. L'équipe API YouTube remercie Ben Longoria pour le temps qu'il nous a consacré et l'expérience dont il nous a fait profiter.
Ben Longoria, Université du Wisconsin - Madison, technologie académique
Février 2009
- Introduction
- La Terre
- Utiliser Movie.as
- Utiliser MovieSprite.as
- Comment puis-je appeler ? Qu'est-ce que je peux obtenir ?
- Conclusion
Introduction
Figure 1: Démo du lecteur TubeLoc Chromeless
Impressionnant ! Dans un mois environ, à l'heure où nous écrivons ces lignes, l'API Player YouTube date d'un an. Combien d'années sur Internet cela fait-il ? Un grand nombre de projets intéressants ont été créés avec l'API. Il vous suffit de suivre le blog de l'API YouTube Developer pour découvrir le travail de nombreux utilisateurs.
L'ensemble actuel d'applications de lecteur d'API YouTube est écrit en ActionScript 2. Si ce langage reste très intéressant, de nombreuses personnes utilisent désormais ActionScript 3 et/ou Flex. Le problème est que vous devez parcourir plusieurs paniers pour que les applications ActionScript 2 communiquent avec les applications ActionScript 3. "Mais je crois que j'en ai entendu parler...N'y a-t-il pas déjà quelque chose ?" demandez-vous.
Un grand nombre d'entre vous ont déjà trouvé la procédure à suivre et ont eu leur avis sur les forums d'API YouTube pour les développeurs. Des projets comme le wrapper Chromeless pour AS3 et le lecteur intégré Flex ont également été créés pour faciliter l'utilisation de ces composants.
Je cherchais un moyen simple de réutiliser les fonctionnalités de l'API Player uniquement dans ActionScript 3 ou MXML. Une classe Flex sans frais pour ces projets Flex et un composant Flex facile à utiliser pour les projets Flex. TubeLoc répond aux deux exigences
TubeLoc (une combinaison de YouTube et LocalConnection) est une bibliothèque ActionScript 3 qui sert d'adaptateur pour l'API Player ActionScript 2. Vous pouvez facilement ajouter des fonctionnalités vidéo YouTube à vos applications ActionScript 3 ou Flex à l'aide des lecteurs YouTube Chrome ou Chrome. TubeLoc utilise la classe LocalConnection pour communiquer avec un médiateur ActionScript 2. Le fichier SWF ActionScript 2 communique avec le lecteur API YouTube officiel. Alors, comment utiliser cette méthode ?
La Terre
Tout d'abord, vous devez télécharger la version actuelle de la bibliothèque à partir du projet Google Code. Après avoir décompressé l'archive ZIP de la version, vous trouverez un répertoire as3. En dessous se trouve le répertoire src, qui inclut des exemples de classes. N'hésitez pas à les utiliser comme point de départ. Dans le répertoire src, com/enefekt/tubeloc contient deux fichiers. Movie.as est ce que vous pouvez utiliser dans vos projets Flex, et MovieSprite.as est ce que vous pouvez utiliser dans vos projets ActionScript 3. Dans com/enefekt/tubeloc/event, différentes classes d'événements correspondant aux différentes notifications peuvent être envoyées depuis le lecteur.
Avant d'essayer les exemples de ce tutoriel, assurez-vous que le répertoire src du répertoire as3 se trouve dans le chemin d'accès de votre classe. La procédure à suivre varie selon l'outil de développement utilisé. Consultez la documentation de votre environnement de développement.
Une fois la démo ou l'application compilée, vous avez besoin du fichier SWF ActionScript 2 qui communique avec l'API du lecteur YouTube. Vous trouverez ce fichier SWF dans l'archive de la version: as3/lib/as2_tubeloc.swf. Assurez-vous qu'il se trouve à côté du fichier HTML qui intègre votre application SWF, comme suit:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Remarque: Vous pouvez modifier le chemin d'accès à ce fichier SWF à l'aide de la propriété playerWrapperUrl avec la bibliothèque.
Utiliser Movie.as
Voyons comment utiliser la version Flex de TubeLoc. Nous allons d'abord nous intéresser au lecteur Chrome complet (avec toutes les commandes), puis au lecteur Chromeless BYOC. Voici comment utiliser le lecteur Chrome complet en MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Je sais, c'est douloureux, n'est-ce pas ? Pas du tout ! Soyons fous:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Nous ajoutons un attribut supplémentaire à la douleur : c'est tout. Voici à quoi ressemblerait le fichier MXML dans son intégralité:
<?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>
Remarque: Dans l'élément mx:Application, nous ajoutons l'espace de noms tubeloc avec le package du composant Movie. Ensuite, nous pouvons utiliser le composant comme illustré. Nous verrons plus tard ce qu'il est possible de définir et d'appeler sur ce composant.
Utiliser MovieSprite.as
Voyons maintenant comment utiliser la version ActionScript 3 de TubeLoc. Cette version ne nécessite aucune classe du framework Flex et n'utilise que des classes Flash Player natives. Nous allons d'abord voir le lecteur Chrome complet, puis le lecteur Chromeless. Voici un exemple complet:
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;
}
}
}
Tout d'abord, nous importons les classes TubeLoc nécessaires. Ensuite, dans le constructeur, nous créons une instance de la classe MovieSprite et nous transmettons notre ID vidéo au constructeur de MovieSprite. Ensuite, nous ajoutons un écouteur d'événements pour PlayerReadyEvent. Dans le gestionnaire d'événements onPlayerReady, nous définissons la taille du film. Remarque: Comme nous utilisons le lecteur Chrome complet, nous utilisons une propriété statique CHROME_HEIGHT sur la classe MovieSprite. Cela nous aide à dimensionner le film en tenant compte de la hauteur de Chrome.
Que pensez-vous du lecteur 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");
}
}
}
Qu'est-ce qui va changer ? Dans le constructeur, nous transmettons null pour l'ID vidéo, et le deuxième paramètre true indique à la classe MovieSprite que nous allons utiliser Chromeless. Vous remarquerez également une différence dans le gestionnaire d'événements onPlayerReady. C'est là que nous chargeons notre vidéo par identifiant à l'aide de la méthode loadVideoById.
Que puis-je appeler, que puis-je obtenir ?
Quels sont les éléments à appeler, et avec quels événements devons-nous travailler ? L'archive de la version que vous avez téléchargée contient la documentation complète du code pour en savoir plus. Voici une brève présentation de Movie.as et de MovieSprite.
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
Outre ces méthodes, vous avez accès aux propriétés suivantes dans le composant Movie.as:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Voici les événements auxquels vous pouvez vous abonner. Pour en savoir plus, consultez la documentation.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusion
J'espère que cet article vous a aidé à intégrer des fonctionnalités et des contenus YouTube dans vos applications Flash. Il existe une limite à garder à l'esprit lorsque vous développez avec TubeLoc: vous ne pouvez pas avoir deux lecteurs YouTube sur scène en même temps.
Nous espérons pouvoir résoudre ce problème à temps. Par conséquent, si vous trouvez des bugs ou des fonctionnalités manquantes, accédez au projet Google Code et signalez-les dans l'outil de suivi des problèmes. Merci de votre attention,
Biographie de l'auteur
Ben Longoria est développeur d'applications académiques à l'université de Wisconsin-Madison. Il se développe avec Flash depuis Flash 5 et Flex depuis la version Flex 2. Depuis deux ans, il développe également des applications compatibles avec Mozilla. Ben a travaillé sur plusieurs projets éducatifs et universitaires, y compris sur des applications multiplates-formes ciblant à la fois le navigateur et les ordinateurs. Il joue un rôle actif dans la conception d'interfaces et d'interactions, et aime créer des logiciels utilisables. Vous trouverez son blog sur http://enefekt.com/sansbrowser/, et ses contributions à InsideRIA.
Ce travail est distribué sous licence Creative Commons Attribution 3.0 (États-Unis).