Flash - composant vidéo de YouTube

De EduTech Wiki
Version datée du 21 octobre 2013 à 10:32 par Daniel K. Schneider (discussion | contributions) (Page créée avec « == Introduction == Il est possible d'intégrer des vidéos Flash qui sont sur le serveur de youtube. Pour cela Google (le propriétaire de YouTube) a crée une API (une i... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Introduction

Il est possible d'intégrer des vidéos Flash qui sont sur le serveur de youtube. Pour cela Google (le propriétaire de YouTube) a crée une API (une interface pour programmeur d'application). «The AS3 API allows users to control the YouTube video players by loading the player into a Flash application and making calls via ActionScript to the player's public API. Your application can use a chromeless player, for which you will build custom controls in Flash, or an embedded player that has built-in controls. Calls can be made to play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions. The ActionScript API is automatically activated when the player is loaded into another SWF.» (YouTube ActionScript 3.0 Player API Reference)

Pour intégrer une vidéo il faut se servir du code suivant, en substituant l'IDyoutube, par l'ID à 11 caractères qui définit les vidéos de ce serveur. Les paramètres, comme la taille de la fenêtre de visualisation, peuvent être définit à l'intérieur de ce code action script.

Security.allowDomain("www.youtube.com");
var player:Object;
var loader:Loader;
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
function onLoaderInit(event:Event):void
{
	addChild(loader);
	loader.content.addEventListener("onReady", onPlayerReady);
	loader.content.addEventListener("onError", onPlayerError);
	loader.content.addEventListener("onStateChange", onPlayerStateChange);
	loader.content.addEventListener("onPlaybackQualityChange",onVideoPlaybackQualityChange);
}
function onPlayerReady(event:Event):void
{
	trace("player ready:", Object(event).data);
	player = loader.content;
	// Ajuster les paramètres suivants
	player.setSize(550,400);
	player.x = 200;
	player.y = 150;
	// wTDfmxWBWrE est a REMPLACER pour l'ID de VOTRE Film (c.f. l'URL dans YouTube)
	player.loadVideoById("wTDfmxWBWrE", 1); 
}
function onPlayerError(event:Event):void
{
	trace("player error:", Object(event).data);
}
function onPlayerStateChange(event:Event):void
{
	trace("player state:", Object(event).data);
}
function onVideoPlaybackQualityChange(event:Event):void
{
	trace("video quality:", Object(event).data);
}

Un aide plus détaillée peut être obtenue ici

Tutoriel

Voici un petit tutoriel pas à pas pour inclure une vidéo Flash qui est sur le serveur de youtube. Il a été réalisé sur Flash CS6.

  • 1. Ouvrir flash et choisir Action script 3.0, puis créer un nouveau fichier. Vous devriez arriver ici :
1 fichier.jpg


  • 2. Taper sur la touche F9 du clavier, ce qui ouvre la fenêtre Action script.

C'est là que l'on va placer le code donné ci-dessus.

2 actionscript.jpg


  • 3. Copier-coller dans la fenêtre Action script le code donné au point 6 .
3 code.jpg


  • 4. Dans le code, remplacer ce qui est encadré par l'ID de votre vidéo youtube. Attention, inclure seulement les 11 derniers signes.
4 id.jpg


Vous remplacez par "REtecLEKzXU"

5 id exemple.jpg


  • 6. Ensuite, vous pouvez ajuster les paramètres de taille et de placement du player selon votre convenance.
6 parametres.jpg


  • 7. Si vous testez dans un navigateur, vous verrez que la vidéo se lance automatiquement et qu'aucun bouton de commande n'apparaît.

Il faut donc ajouter un bouton play et un bouton pause. Pour ce faire, copier-coller le code ci-dessous :

play_btn.addEventListener(MouseEvent.CLICK, playVid);
function playVid(e:MouseEvent):void {
player.playVideo();
}
pause_btn.addEventListener(MouseEvent.CLICK, pauseVid);
function pauseVid(e:MouseEvent):void {
player.pauseVideo();
}


7 code boutons.jpg


  • 8. Il faut maintenant créer les boutons associés sur la scène.

Créer un 1er bouton, le renommer dans les properties "play_btn" et modifier son label par "Play". Créer un 2ème bouton, le renommer dans les properties "pause_btn" et modifier son label par "Pause".

8 boutons.jpg


  • 9. Il reste un détail à régler. Pour l'instant, la vidéo commence toute seule lorsque vous ouvrez le fichier dans le navigateur.

Il faut ajouter cette ligne de code :

player.pauseVideo();

Ainsi la vidéo démarre lorsque vous cliquez sur le bouton play !


9 code pause.jpg


  • 10. Voilà ce que vous devriez obtenir dans votre navigateur !
10 navigateur.jpg


  • Dernier conseil : n'oubliez pas de déposer votre fichier .swf sur un serveur de manière à voir ce que cela donne !