ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer un player audiovisuel personnalisé
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)
Commentaire(s)
Aucun.