Dans ce tutoriel, nous verrons comment réaliser un joli lecteur vidéo très simplement grâce aux nombreuses classes présentes dans le framework Flex.

 

La structure de notre application

Ce projet est composé de deux fichiers :
  • VideoPlayer.mxml
  • stylePlayer.css
Rentrons dans le vif du sujet en voyant la structure de notre mxml : 
< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="512" height="408" layout="absolute" >
   
    < mx:VideoDisplay id="video" width="512" height="384" autoPlay="false" source="mavideo.ext"
        playheadUpdate="updatePlayer()" />
Tout d'abord, nous créons un composant VideoDisplay qui contiendra notre vidéo. Nous lui donnons une taille fixe pour éviter les redimentionnements hasardeux.
L'attribut autoPlay peut être défini à true ou false, dans le cas où l'on souhaite lancer la lecture de la vidéo au chargement de l'application ou non.
S'en suis la source de notre vidéo, ou plus exactement l'emplacement de notre fichier vidéo.
Pour terminer, nous ajoutons un évenement qui nous permettra de gérer l'avancement de notre vidéo.
 
Nous allons maintenant définir un bloc qui contiendra les boutons et les détails de notre lecteur. 
< mx:HBox width="512" verticalAlign="middle" y="384">
< mx:Button id="btn_mode" label="Play" click="changeMode()" styleName="button" width="80" />
Pour commencer, nous disposons un bouton qui nous permettra de contrôler le lancement ou l'arret de la lecture. Pour ce faire, nous avons besoin de définir un écouteur sur le clique de l'utilisateur.
Le label permet d'écrire sur le bouton l'action effectuer.
Et pour terminer, nous définissons un nom de style qu'on appliquera plus tard. 
< mx:ProgressBar id="progression" width="100%" mode="manual" minimum="0" maximum="0" label="0:00/0:00" labelPlacement="right" />
Voici notre dernier bloc, celui qui permettra à l'utilisateur de connaître l'avancement de la vidéo. Nous définissons donc un composant ProgressBar.
Pour avoir un meilleur controle de ce composant, nous définissons l'attribut mode à manual pour que la mise à jour se fasse manuellement. Pour cela, nous devons définir l'attribut minimum à 0 et le maximum à 1. Nous lui appliquons maintenant un label qui nous servira à afficher l'avancement, que nous initialiserons avec une valeur d'attente ("0:00 / 0:00" pour une meilleure visualisation lorsque la vidéo n'est pas encore chargée).
Et pour terminer, nous positionnons ce label sur la droite de la barre de progression.
< /mx:HBox>
< /mx:Application>
Et bien évidemment nous refermons les balises précédemment ouvertes.
Nous avons maintenant la structure de notre mxml. Passons maintenant à l'ActionScript.

 

Le controle de la lecture

Pour pouvoir controller le lancement et l'arret de la lecture, nous devons créer les actions qui se feront lors d'un clique sur celui-ci. 
< mx:Script>
      private function changeMode():void {
            if(!video.playing) {
                  btn_mode.label = "Pause";
                 video.play();
            }
            else {
                  btn_mode.label = "Play";
                  video.pause();
            }
      }
Le code reste très simple. Tout d'abord nous analysons l'état du playeur en testant le booléen video.playing qui retourne vrai si la vidéo est en cours de lecture, faux sinon. Dans les deux cas, nous modifions le label du bouton pour indiquer à l'utilisateur que l'action sur ce bouton à changer, puis, soit nous lançons la lecture, soit nous l'arrêtons.

 

Et pour terminer, nous avons besoin de mettre à jour l'avancement de la lecture.

 

L'état d'avancement 

private function updatePlayer():void {
            progression.setProgress(video.playheadTime, video.totalTime);
               
            var min : int = Math.floor(video.playheadTime/60);
            var sec : int = Math.floor(video.playheadTime%60);
            var currentTime : String = String(min)+':'+ ( sec<=9 ? "0"+String(sec) : String(sec) );
               
            var min_tt : int = Math.floor(video.totalTime/60);
            var sec_tt : int = Math.floor(video.totalTime%60);
            var totalTime : String = String(min_tt)+':'+ ( sec_tt<=9 ? "0"+String(sec_tt) : String(sec_tt) );
               
            progression.label= currentTime + ' / ' + totalTime;
      }
< /mx:Script>
En premier lieu, nous mettons la barre de progression à jour en utilisant la méthode setProgress du composant ProgressBar, dans lequel nous indiquons l'avancement de la vidéo ainsi que le temps total.
Ensuite, viennent quelque calculs pour avoir un affichage un peu plus convenable, que nous formatons puis passons au label de la barre d'avancement pour afficher l'état courrant.

 

Le design

Pour terminer notre lecteur, rien de mieux qu'un peu de customisation. Voici la feuille de style, elle ne nécessite pas réellement d'explications : 
@font-face
{
    src:                    url("assets/font/Framd.TTF");
    fontFamily:             franklin1;
    font-anti-alias-type:     advanced;
    font-weight:             normal;
}

Application {
    font-family:                 franklin;
    font-size:                     11;
    color:                         #333333;
    background-gradient-alphas: 0, 0;
    background-color:             #666666;
    theme-color:                 #333333;
    font-weight:                normal;
    background-size:            "100%";
    modal-transparency-color:    #000000;
    modal-transparency-blur:    2;
}

.button {
    up-skin:                Embed("assets/buttons/button.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
    over-skin:             Embed("assets/buttons/button1.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
    down-skin:           Embed("assets/buttons/button2.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
    disabled-skin:       Embed("assets/buttons/Boton_dis.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="11");

    color:                     #e8e8e8;
    font-family:             franklin1;

    padding-left:             6;
    padding-right:             6;

    text-roll-over-color:     #e8e8e8;
    text-selected-color:     #cccccc;
}

 

Aller plus loin

Nous venons de voir comment réaliser un lecteur vidéo. A vous maintenant de réaliser le votre, avec les composants et les actions que vous souhaitez. Par exemple, définir un HSlider à la place de la progressBar, ou encore créer un écouteur sur celle-ci pour se déplacer librement dans la vidéo.
 
Voici une démonstration, suivi du code source :


Votre lecteur Flash n'est pas à jour. Installer la dernière version

 
Téléchargez les sources ici.