Nous allons voir ici comment créer un player vidéo personnalisé. On commence par créer une zone vidéo :

//Imports Flash import flash.media.Video; import flash.media.SoundTransform; import flash.net.NetConnection; import flash.net.NetStream; import flash.events.Event; import flash.events.MouseEvent; import flash.display.StageDisplayState; //URL de la vidéo var videoURL:String = "video.flv"; //Création d'une zone vidéo var zoneVideo:Video = new Video(); zoneVideo.width = 400; zoneVideo.height = 226; zoneVideo.x = 10; zoneVideo.y = 10; addChild(zoneVideo); //Connection de l'application au serveur var connection:NetConnection = new NetConnection(); connection.connect(null); //Pas de connexion //Création d'un flux de données au sein de la connexion var stream:NetStream = new NetStream(connection); //Récupère les infos sur le flux vidéo (durée, taille, framerate, nom et type de fichier, point de lecture) var dureeVideo:Number; var largeurVideo:Number; var hauteurVideo:Number; var customClient:Object = new Object(); customClient.onMetaData = onMetaDataHandler; function onMetaDataHandler(info:Object):void { dureeVideo = info.duration; largeurVideo = info.width; hauteurVideo = info.height; totalTime.text = String(Math.round(info.duration)); } stream.client = customClient; //Défini la zone d'affichage du flux de données zoneVideo.attachNetStream(stream); //Lance la lecture du flux de données stream.play(videoURL);

Ensuite, on s'occupe de l'interface de base : LECTURE, PAUSE, REPRISE, STOP

//PLAY function playMovie(e:MouseEvent):void { stream.play(videoURL); } btnPlay.addEventListener(MouseEvent.CLICK, playMovie); //PAUSE function pauseMovie(e:MouseEvent):void { stream.pause(); } btnPause.addEventListener(MouseEvent.CLICK, pauseMovie); //REPLAY function repriseMovie(e:MouseEvent):void { stream.resume(); } btnReprise.addEventListener(MouseEvent.CLICK, repriseMovie); //STOP function stopMovie(e:MouseEvent):void { stream.pause(); stream.seek(0); } btnStop.addEventListener(MouseEvent.CLICK, stopMovie);

Puis les boutons un peu plus spécifiques : FULLSCREEN, MUTE

//FULLSCREEN ON function FullScreen(e:MouseEvent):void { stage.displayState = StageDisplayState.FULL_SCREEN; } btnFullScreen.addEventListener(MouseEvent.CLICK, FullScreen); //FULLSCREEN OFF function NormalScreen(e:MouseEvent):void { stage.displayState = StageDisplayState.NORMAL; } btnNormalScreen.addEventListener(MouseEvent.CLICK, NormalScreen); //Son ON function SonON(e:MouseEvent):void { var modifSon:SoundTransform = new SoundTransform(); modifSon.volume = 1.0; stream.soundTransform = modifSon; } btnSonON.addEventListener(MouseEvent.CLICK, SonON); //Son OFF function SonOFF(e:MouseEvent):void { var modifSon:SoundTransform = new SoundTransform(); modifSon.volume = 0.0; stream.soundTransform = modifSon; } btnSonOFF.addEventListener(MouseEvent.CLICK, SonOFF);

Pour la BARRE DE PROGRESSION, faite un clip (progressBar) de 100 images clé avec l'animation de la barre qui se remplit à 100%.
Ensuite, mettez le code suivant :

//Barre de progression function progressAff(e:Event):void { var posActu = stream.time; //Récupère la position de la tête de lecture (nombre de secondes lues) var posCurseur:int = posActu * 100 / dureeVideo; //Calcul la position du curseur progressBar.gotoAndStop(posCurseur); //Positionne le curseur } progressBar.addEventListener(Event.ENTER_FRAME, progressAff);

Enfin, pour l'affichage du TEMPS, j'ai 2 zone de texte dynamique : totalTime et actuTime

//Affichage du temps function affTime(e:Event):void { //Durée total de la vidéo var duree = String(Math.round(dureeVideo)); //Récupère la durée de la vidéo (en seconde) var nbSeconde:String = String(duree%60); //Récupère le nombre de seconde à afficher à droite if(nbSeconde.length == 1){nbSeconde = "0"+nbSeconde;} //Rajout d'un 0 si il n'y a qu'un chiffre (00:00) var nbMinute:String = String((duree-(duree%60))/60); //Récupère le nombre de minute à afficher à gauche if(nbMinute.length == 1){nbMinute = "0"+nbMinute;} //Rajout d'un 0 si il n'y a qu'un chiffre (00:00) totalTime.text = nbMinute+":"+nbSeconde; //Affichage //Durée écoulé à l'intant T var dureeT = String(Math.round(stream.time)); //Récupère la durée de la vidéo (en seconde) var nbSecondeT:String = String(dureeT%60); //Récupère le nombre de seconde à afficher à droite if(nbSecondeT.length == 1){nbSecondeT = "0"+nbSecondeT;} //Rajout d'un 0 si il n'y a qu'un chiffre (00:00) var nbMinuteT:String = String((dureeT-(dureeT%60))/60); //Récupère le nombre de minute à afficher à gauche if(nbMinuteT.length == 1){nbMinuteT = "0"+nbMinuteT;} //Rajout d'un 0 si il n'y a qu'un chiffre (00:00) actuTime.text = nbMinuteT+":"+nbSecondeT; //Affichage } addEventListener(Event.ENTER_FRAME, affTime);

Aperçus & Sources : (Flash CS4)

• player_perso.swf


• player_perso.zip


• player_perso.fla
• player_perso.swf
• video.flv

Aucun.