Cet article a été rédigé et envoyé par un développeur externe. L'équipe de l'API YouTube remercie Ben Longoria pour son temps et son expertise.
Ben Longoria, University of Wisconsin - Madison, Academic Technology
Février 2009
- Introduction
- État des lieux
- Utiliser Movie.as
- Utiliser MovieSprite.as
- What Can I Call, What Do I Get?
- Conclusion
Introduction
Figure 1: Démo du lecteur TubeLoc sans Chrome
Waouh ! À l'heure où nous écrivons ces lignes, l'API YouTube Player fêtera son premier anniversaire. Combien d'années Internet cela représente-t-il ? De nombreux projets de qualité ont été créés sur la base de l'API. Il vous suffit de suivre le blog de l'API YouTube pour les développeurs pour constater que de nombreux utilisateurs ont réalisé des choses extraordinaires avec elle.
L'ensemble actuel d'applications de lecteur de l'API YouTube est écrit en ActionScript 2. Bien que ce langage reste très pratique, de nombreuses personnes utilisent désormais ActionScript 3 et/ou Flex. Le problème est que vous devez suivre quelques étapes pour que les applications ActionScript 2 communiquent avec les applications ActionScript 3. Vous vous demandez peut-être : "Mais attendez… Je pense avoir déjà entendu parler de cela. N'existe-t-il pas déjà un outil pour cela ?"
De nombreux utilisateurs ont déjà trouvé la solution et ont gentiment partagé leur savoir sur les forums des développeurs de l'API YouTube. Les projets AS3 Chromeless Wrapper et Flex Embedded Player ont également été conçus pour faciliter l'utilisation de cette fonctionnalité par les développeurs.
Je voulais un moyen simple et facile de réutiliser les fonctionnalités de l'API Player uniquement en ActionScript 3 ou en MXML. Une classe sans Flex pour les projets qui y sont allergiques, et un composant Flex facile à utiliser pour les projets qui l'apprécient. TubeLoc a satisfait à ces deux exigences.
TubeLoc (un mashup de YouTube et de LocalConnection) est une bibliothèque ActionScript 3 qui sert d'adaptateur à l'API YouTube Player ActionScript 2. Vous pouvez facilement ajouter des fonctionnalités vidéo YouTube à vos applications ActionScript 3 ou Flex avec les lecteurs YouTube avec ou sans barre d'outils. TubeLoc utilise la classe LocalConnection pour communiquer avec un fichier SWF de médiateur ActionScript 2. Le fichier SWF ActionScript 2 communique avec le lecteur officiel de l'API YouTube. Comment l'utiliser ?
État des lieux
Commencez par 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. Sous celui-ci se trouve le répertoire src, qui comprend quelques exemples de classes. N'hésitez pas à les utiliser comme point de départ. Sous com/enefekt/tubeloc, dans le répertoire src, se trouvent deux fichiers. Vous pouvez utiliser Movie.as dans vos projets Flex et MovieSprite.as dans vos projets ActionScript 3. Dans com/enefekt/tubeloc/event, il existe différentes classes d'événements pour les différentes notifications pouvant être envoyées par le lecteur.
Avant d'essayer les exemples de ce tutoriel, assurez-vous que le répertoire src du répertoire as3 figure dans votre chemin de classe. La procédure à suivre varie selon l'outil de développement que vous utilisez. Consultez donc la documentation de votre environnement de développement.
Une fois que vous avez compilé votre application ou votre démonstration, vous aurez besoin du fichier SWF ActionScript 2 qui communique avec l'API YouTube Player. Vous trouverez ce fichier SWF dans l'archive des versions sur 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 examiner le lecteur avec Chrome complet (avec toutes les commandes), puis le lecteur Chromeless BYOC. Voici comment utiliser le lecteur full-chrome en MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Je sais, je sais, c'est douloureux, n'est-ce pas ? Pas du tout ! Alors, allons-y:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Nous ajoutons un autre attribut à la difficulté, c'est tout. Voici à quoi ressemble l'ensemble du fichier 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>
Remarque: Dans l'élément mx:Application, nous ajoutons l'espace de noms tubeloc avec le package du composant Movie. Nous pouvons ensuite utiliser le composant comme indiqué. Nous verrons plus tard ce qui peut être défini et appelé 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 natives de Flash Player. Nous allons d'abord voir comment créer le lecteur avec Chrome, 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;
}
}
}
Nous commençons par importer les classes TubeLoc nécessaires. Ensuite, dans le constructeur, nous créons une instance de la classe MovieSprite et transmettons notre ID vidéo dans le constructeur de MovieSprite. Nous ajoutons ensuite un écouteur d'événements pour PlayerReadyEvent. Dans le gestionnaire d'événements onPlayerReady, nous définissons la taille du film. Remarque: Étant donné que nous utilisons le lecteur full-chrome, nous utilisons une propriété statique CHROME_HEIGHT sur la classe MovieSprite. Cela nous aide à dimensionner le film en tenant compte de la hauteur du chrome.
D'accord. Qu'en est-il 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");
}
}
}
Quelles sont les différences ? Dans le constructeur, nous transmettons null pour l'ID de la vidéo, et le deuxième paramètre true indique à la classe MovieSprite que nous allons utiliser une interface sans chrome. Vous remarquerez également une différence dans le gestionnaire d'événements onPlayerReady. C'est ici que nous chargeons notre vidéo par ID, à l'aide de la méthode loadVideoById.
What Can I Call, What Do I Get?
Quels appels sont disponibles et avec quels événements devons-nous travailler ? La documentation complète du code est disponible dans l'archive de version que vous avez téléchargée. Pour un aperçu rapide, voici les méthodes disponibles pour Movie.as et 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
En plus de ces méthodes, dans le composant Movie.as, vous avez accès aux propriétés suivantes:
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
Nous espérons que cet article vous a aidé à intégrer les fonctionnalités et les contenus YouTube dans vos applications Flash. Une limite est à prendre en compte lorsque vous développez avec TubeLoc: vous ne pouvez pas avoir deux lecteurs YouTube sur la scène en même temps.
J'espère que ce problème sera résolu en temps voulu. Par conséquent, si vous constatez des bugs ou que vous manquez une fonctionnalité, veuillez consulter le projet Google Code et signaler le problème dans Issue Tracker. Merci de votre attention,
Biographie de l'auteur
Ben Longoria est développeur d'applications académiques à l'université du Wisconsin à Madison. Il développe des applications avec Flash depuis Flash 5 et Flex depuis la version 2. Depuis deux ans, il développe également des applications Mozilla. Ben a travaillé sur un certain nombre de projets éducatifs et universitaires, y compris des applications multiplates-formes ciblant à la fois le navigateur et l'ordinateur. Il joue un rôle actif dans la conception d'interfaces et d'interactions, et aime relever le défi de créer des logiciels utilisables. Vous pouvez consulter son blog à l'adresse http://enefekt.com/sansbrowser/ et lire ses contributions sur InsideRIA.
Ce contenu est concédé sous licence Creative Commons Attribution 3.0 United States License.