« Flash - composant vidéo de YouTube » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
Aucun résumé des modifications
Ligne 78 : Ligne 78 :


Un aide plus détaillée peut être obtenue [http://code.google.com/intl/fr-FR/apis/youtube/flash_api_reference.html#playVideo ici]
Un aide plus détaillée peut être obtenue [http://code.google.com/intl/fr-FR/apis/youtube/flash_api_reference.html#playVideo 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 :
[[Fichier:1 fichier.jpg|cadre|centré]]
*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.
[[Fichier:2 actionscript.jpg|cadre|centré]]
*3. Copier-coller dans la fenêtre Action script le code donné au point 6 .
[[Fichier:3 code.jpg|cadre|centré]]
*4. Dans le code, remplacer ce qui est encadré par l'ID de votre vidéo youtube. Attention, inclure seulement les 11 derniers signes.
[[Fichier:4 id.jpg|cadre|centré]]
*5. Par exemple, l'url est : http://www.youtube.com/watch?v=REtecLEKzXU
Vous remplacez par "REtecLEKzXU"
[[Fichier:5 id_exemple.jpg|cadre|centré]]
*6. Ensuite, vous pouvez ajuster les paramètres de taille et de placement du player selon votre convenance.
[[Fichier:6 parametres.jpg|cadre|centré]]
*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 :
<source lang="actionscript">
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();
}
</source>
[[Fichier:7 code_boutons.jpg|cadre|centré]]
*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".
[[Fichier:8 boutons.jpg|cadre|centré]]
*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 :
<source lang="actionscript">
player.pauseVideo();
</source>
Ainsi la vidéo démarre lorsque vous cliquez sur le bouton play !
[[Fichier:9 code_pause.jpg|cadre|centré]]
*10. Voilà ce que vous devriez obtenir dans votre navigateur !
[[Fichier:10 navigateur.jpg|cadre|centré]]
*Dernier conseil : n'oubliez pas de déposer votre fichier .swf sur un serveur de manière à voir ce que cela donne !
*Référence utilisée pour le code des boutons : http://www.republicofcode.com/tutorials/flash/as3youtube/

Version du 21 octobre 2013 à 10:44

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage

  • Utiliser des Vidéos YouTube dans Flash

Prérequis

Voir aussi

Matériel (fichiers *.fla à manipuler)


Qualité et niveau

Ce tutoriel aidera les intéressés à démarrer. Le tutoriel n'est pas très complet, mais peut servir comme fiche pratique dans un atelier.

Prochaines étapes

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