Lire un flv avec FLVPlayback et le controler avec les FLVPayback Custom UI (staring Homer Simpson)

Spider Cochon

Le but: gérer un lecteur vidéo avec actionscript et le composant FLVPlayback.

  • Dans ce billet nous allons créer le fichier flv (hum hum trop dur…)
  • Positionner les composants FLVPlayback et FLVPlayback Custom UI sur la scène.
  • Affecter des évènements aux occurences placées sur la scène.
  • Indiquer les paramètres que nous voulons par défaut à la vidéo
  • et enfin Positionner dynamiquement un champs de texte sur la scène dans lequel on fera apparaitre les informations souhaitées

EXEMPLE

LE FICHIER FLA

Création du fichier FLV

Tout d’abord convertissez votre vidéo au format .flv.
Pour cela :

  • Fichier > Importer > Importer de la vidéo
  • Sélectionner le fichier vidéo : sélectionner, sur votre disque dur, la vidéo que vous voulez convertir
  • Déploiement : choisir téléchargement progressif à partir d’un serveur web
  • Options de codage : afficher les paramètres de codage et les changer si nécessaire
  • Réhabillage : ne choisir aucun habillage car nous le ferons nous-même
  • Cliquez sur terminer.

Nous aurions pu utiliser une enveloppe pour gérer la lecture du fichier, mais certaines fois on aimerait avoir la possibilité de gérer soi-même son bouton, alors autant le faire par AS.

Placement sur la scène des occurences qui nous intéressent

 
// création d'une occurence de flvplayback sur la scene : on lui donne comme nom laVideo. getNextHighestDepth() = la profondeur la plus "haute"
this.attachMovie ("FLVPlayback", "laVideo",this.getNextHighestDepth()); 
 
// création d'une occurence du bouton play (n'oubliez pas de cocher dans les propriétés de liaison : exporter dans la première image)
this.attachMovie ("PlayButton", "playButton_mc",this.getNextHighestDepth(), {_x:10, _y:90}); 
 
// création d'une occurence du bouton stop(n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
this.attachMovie ("StopButton", "stopButton_mc",this.getNextHighestDepth(), {_x:40, _y:90}); 
 
// création d'une occurence du bouton volume(n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
this.attachMovie ("VolumeBar", "volumeBar_mc",this.getNextHighestDepth(), {_x:10, _y:130}); 
 
// création d'une occurence de la barre de recherche (n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
this.attachMovie ("SeekBar", "seekBar_mc",this.getNextHighestDepth());

placement de la vidéo au centre de la scene.

 
var ecouteur:Object = new Object(); 
 
// ecouteur qui se déclenchera au  redimensionnement de la scène
ecouteur.onResize = function(){ 
 // vidéo centrée horizontalement
laVideo._x = Stage.width/2 - laVideo._width/2;
// vidéo centrée verticalement
laVideo._y = Stage.height/2 - laVideo._height/2; 
 
// placement de la seekbar sur la scene
seekBar_mc._width = laVideo._width; // même taille que la video
// centré horizontalement comme la vidéo
seekBar_mc._x = Stage.width/2 - laVideo._width/2; 
// placé en dessous de la vidéo
seekBar_mc._y = Stage.height/2 + laVideo._height/2; 
 
// placement des bouton sur la scene
playButton_mc._x = Stage.width/2 - laVideo._width/2;
playButton_mc._y = Stage.height/2 + laVideo._height/2 + playButton_mc._height;
stopButton_mc._x = Stage.width/2 - laVideo._width/2 + 40;
stopButton_mc._y = Stage.height/2 + laVideo._height/2 + stopButton_mc._height;
volumeBar_mc._x = Stage.width/2 - laVideo._width/2 + 80;
volumeBar_mc._y = Stage.height/2 + laVideo._height/2 + 38;
 
// il y a un bug losqu'on redimmensionne la fenetre les curseurs ne suivent pas. Si quelqu'un a une idée
}
 
Stage.addListener(ecouteur); // on "lie" l'écouteur à la scène
ecouteur.onResize();

Utilisation du composant FLVPlayback

composant FLVPlaybackTout d’abord, insérer le composant dans votre bibliothèque.
Pour cela, afficher la palette composant (si elle n’est pas visible : fenêtre > composant ou ctrl + F7).

Pour le controle de la vidéo nous allons utiliser les FLVPayback Custom UI (mais on aurait pu aussi créer des boutons ).


// affectation des évènements aux occurences placées sur la scène.
laVideo.playButton = playButton_mc;
laVideo.stopButton = stopButton_mc;
laVideo.volumeBar = volumeBar_mc;
laVideo.seekBar = seekBar_mc;

La vidéo

 
// chemin de la video
laVideo.contentPath = "spider-cochon.flv";
// parametres de la video
//la vidéo ne démarrera pas automatiquement
laVideo.autoPlay = false; 
// la vidéo ne changera pas de taille si on joue une autre vidéo de taille différente
laVideo.autoSize = false; 
// la vidéo ne sera pas remise au début losqu'elle aura fini de jouer
laVideo.autoRewind = false; 
// la vidéo garde son ratio largeur hauteur d'origine
laVideo.maintainAspectRatio = true; 
 
// propriété de la vidéo : ici on veut afficher des infos sur la fenetre sur la scene
// création d'un champs de texte
this.createTextField("monTexte",this.getNextHighestDepth(),0, 0, 550,100); 
monTexte.html = true;
monTexte.multiline = true;
monTexte.wordWrap = true;
 
// création d'un nouvel objet auquel on va associer un évènement
var etat:Object = new Object(); 
etat.stateChange = function (information) { // si évènement se produit
monTexte.text = information.state
if (information.state == "playing") { // l'état est playing : afficher mon texte
monTexte.htmlText = "Spider cochon spider cochon
Il peut macrher au plafond
Est ce qu'il peut faire une toile ?
Bien sur que non c'est un cochon
Prends gaaaarde spider cochon est lààà.";
}
};
 
// on ajoute un écouteur d'évènement à la vidéo
laVideo.addEventListener("stateChange", etat);

Voila.

6 réponses sur “Lire un flv avec FLVPlayback et le controler avec les FLVPayback Custom UI (staring Homer Simpson)”

  1. désolé de te dire ca mais en plus du fait que ton article ne s’affiche pas correctement, il est super mal expliqué et le problème d’affichage le rend incompréhensible…

  2. Pour le problème de l’affichage « je suis en train de le réglé » et il est du au changement du design du site. Et pour le reste … si je peux être plus clair sur point dis moi lequel.

  3. Bonjour Niums,
    Merci pour l’explication. Je suis assez intéressé par ce sujet, mais pas pour jouer un film mais uniquement un son.
    Et pendant que le son joue, des lignes de texte apparaissent au fur et à mesure. J’ai déjà fait mon swf. quand je le test, no prob. Quand je le joue en externe (après publication) no prob. Mais quand je l’intègre dans une page html, y’a pas de texte. seulement le player et le son qui joue.

    Ce qui m’amène à une autre question: comment faire pour que le son ne joue pas automatiquement lorsque le fichier démarre? que ce soit pour du son ou de la vidéo, le clip commence en autoplay, et j’aimerais bien changer ça!

    si on peut en parler au tél, je t’appelle, tu as mon mail.
    merci beaucoup!!!

    1. Hello Sylvain.
      Bon je réponds trèèèèèèès longtemps après mais comme on dit chez moi vaut mieux tard que jamais . Même si la… Est ce que ta question est toujours d’actualité ou as tu trouvé une solution ?

      Sinon le plus simple est de jouer avec les écouteurs : addEventListener et les états de ta vidéo :

      ex pour savoir si t’a vidéo est en train de jouer et donc ne réaliser une action qu’à partir de ce moment :

      var etat:Object = new Object(); 
      	etat.stateChange = function (information) {
      		if (information.state == "playing") 
      		{ // l’état est playing : affiche mon texte
      			monTexte._visible = true;
      			trace("video playing");
      		}
      	}
       
      ///etat : information.state == "playing"
      videoPlayer.addEventListener("stateChange", etat);

      ou videoPlayer est ma video que j’ai attaché à mon conteneur sur la scène.

       
      import mx.video.*;
      this.monConteneur.attachMovie("FLVPlayback", "my_FLVPlybk", 1);
      var  videoPlayer = this.monConteneur.backVideoLoader.my_FLVPlybk ;

      Voili voilou

      +++

    1. Une solution serait de placer les occurences qui nous intéressent dans un movie clip et non plus sur la scene.

      Tu aurais donc un movie clip nommé : playerControl et tu ferais tes attachMovie comme cela :

      // création d’une occurence de flvplayback sur la scene : on lui donne comme nom laVideo. getNextHighestDepth() = la profondeur la plus « haute »
      this.playerControl.attachMovie (« FLVPlayback », « laVideo »,this.getNextHighestDepth());

      // création d’une occurence du bouton play (n’oubliez pas de cocher dans les propriétés de liaison : exporter dans la première image)
      this.playerControl.attachMovie (« PlayButton », « playButton_mc »,this.getNextHighestDepth(), {_x:10, _y:90});

      // création d’une occurence du bouton stop(n’oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
      this.playerControl.attachMovie (« StopButton », « stopButton_mc »,this.getNextHighestDepth(), {_x:40, _y:90});

      // création d’une occurence du bouton volume(n’oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
      this.playerControl.attachMovie (« VolumeBar », « volumeBar_mc »,this.getNextHighestDepth(), {_x:10, _y:130});

      // création d’une occurence de la barre de recherche (n’oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
      this.playerControl.attachMovie (« SeekBar », « seekBar_mc »,this.getNextHighestDepth());

      Enfin il faut penser à mettre à jour l’écouteur pour qu’il place correctement le movie clip sur la scène lors du redimmensionnement.

      Voila +++

Laisser un commentaire

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