La vidéo avec NetStream et FlashVars : contrôler votre player en passant des variables via html

La dernière fois j’avais utilisé flvplayback pour lire une vidéo, mais pour ceux qui ne veulent pas lire une vidéo avec un composant voici la classe netStream. En ce qui concerne la modification des informations envoyées au player vidéo (sans avoir besoin de modifier la source), nous allons utiliser FlashVars.

FlashVars

FlashVars permet d’associer des variables contenu dans un fichier html à un swf.
Ces variables sont accessibles dans le flash en écrivant : _root.maVariable ou _root[« maVariable »].
Dans cet exemple j’ai décidé de permettre la modification de la taille de la vidéo (hauteur/largeur) et la vidéo elle-même.
Ces 3 variables seront transmises directement par la page html grâce au paramètre FlashVars.
Ce qui donne : <param name= »FlashVars » value= »nomVideoVar=spiderCochon.flv&largeurVar=320&hauteurVar=240″ />
C’est à dire : FlashVars= »maVariable1=valeur1&maVariable2=valeur2&maVariable3=valeur3″

NetStream

La classe NetStream (ObjetNetConnection) permet de contrôler les vidéos au format FLV. Pour utiliser cette classe il faut au préalable créer un objet NetConnection. Ensuite créer un objet NetStream() auquel on associera l’objet NetConnection.

Avant de commencer, créez sur votre scène:

  • un nouveau symbole vidéo :
    Allez dans votre bibliothèque (ctrl L) -> clic droit sur nouveau symbole -> choisir nouvelle vidéo.
    Donner au symbole vidéo ainsi créé le nom d’occurence de video
  • 2 movies clips :
    un pour jouer (play, pause)
    un pour arrêt (stop).
    Nommez les respectivement play_mc et arret_mc

Sur un nouveau calque, écrivez le code ci-dessous :



// Attention, il faut que le flv soit encodé avec flash 8 car les versions précédentes n'incluent pas les métadatas
// on ouvre la connection dans le vide, on l'associera plus tard
var connection:NetConnection = new NetConnection();
connection.connect(null);

// chargement et contrôle de la vidéo
var flux:NetStream = new NetStream (connection);

// dimension de la vidéo définie dans le html par les variables largeurVar et hauteurVar
video._width = _root.largeurVar;
video._height = _root.hauteurVar;
//video._width = 320; // taille standard
//video._height = 240;

// attach movie pour faire le lien entre l'objet vidéo sur la scène et le flux video netStream
video.attachVideo(flux);

// donnons le chemin vers la vidéo définit par la variable nomVideoVar
flux.setBufferTime(2);
flux.play(_root.nomVideoVar);
//joue la video et stoppe sur la première frame
flux.seek(0);
flux.pause();

// Lecture   ##################################################################
play_mc.onPress=function(){
	flux.pause(_root.nomVideoVar);
	trace("play");
}

// stop ##################################################################
arret_mc.onRelease = function() {
        flux.seek(0);
        flux.pause(true);
};

Pour contrôler la vidéo en passant une variable dans le html nous allons utiliser FlashVars

nomVideoVar : chemin vers la vidéo
largeurVar : largeur de la vidéo
hauteurVar : hauteur de la vidéo
Ne pas oublier de mettre à jour width et height de l’object.



<object type="application/x-shockwave-flash" data="player.swf" width="320" height="240">
<param name="movie" value="player.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="nomVideoVar=spiderCochon.flv&largeurVar=320&hauteurVar=240" />
</object>

PS : on peut aussi passer des variables pour un composant :

Dans le html
FlashVars= »maVariable=valeur »

Dans flash :
monComposant.valeurDuComposant = _root.maVariable;

Une réponse sur “La vidéo avec NetStream et FlashVars : contrôler votre player en passant des variables via html”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *