Aller au contenu | Aller au menu | Aller à la recherche

Site membre du réseau Izardev et LCNET

Composant Flash : FLVPlayback

FLVPlayback est un composant fournit avec Flash; il permet la lecture de vidéos en flash en intégrant celles-ci directement dans un player avec toutes les fonctionnalités de base (lecture/pause/stop/mute/avancée/durée/plein écran ...).

Nous avions vu dans de précédents articles comment intégrer directement une vidéo dans Flash, puis comment lire une Vidéo externe en utilisant les classes Video, NetStream et NetConnection.

FLVPlayback permet également de lire des vidéos externes, et nous facilite la vie, nous avions déjà utilisé ce composant lors du tutoriel expliquant comment intégrer des sous-titres aux vidéos Flash.

Utilisation et avantages de FLVPlayback

Le principal avantage de l'utilisation de FLVPlayback est le gain de temps car toutes les fonctionnalités sont déjà incluses dans le player fourni par Flash. Lorsque l'on utilise les Netstream/NetConnection, nombre de fonctionnalités sont à coder alors que FLVPlayback les fournit en natif.

Ajout du composant sur la scène

Ouvrez la palette des composants Flash, puis faites glisser un composant FLVPlayback sur la scène :

Notez que vous pouvez également instancier la un nouvel objet FLVPlayback, cependant, il faut embarquer le composant dans la bibliothèque car il n'est pas intégré dans le player Flash (à vérifier). Cela donnerait quelque chose ressemblant à ceci en actionscript :

var _flvpb:FLVPlayback = new FLVPlayback();
this.addChild(_flvpb);

Attribution d'un skin de télécommande

Si vous le souhaitez, vous pouvez attribuer à ce composant un "skin" natif fourni avec le logiciel Flash, pour cela, sélectionnez votre composant FLVPlayback puis afficher l'inspecteur de composants (Fenêtre > inspecteur de composants ou Maj+F7).

Dans cet exemple, j'ai sélectionné le skin SkinUnderPLayStopSeekCaptionVol.swf, vous devriez voir apparaître le skin de la télécommande du player automatiquement sur la scène comme illustré ci-dessous :

Notes :

  • vous pouvez réaliser vous même votre skin assez facilement, en regardant de plus près l'api et la classe FLVPlayback,
  • si votre skin propose la fonction "plein écran", il faut intégrer correctement votre animation flash : en passant le paramètre allowFullScreen dans le HTML/

Nom d'occurrence du composant FLVPlayback

Pour charger la vidéo en actionscript, il va falloir donner un nom d'occurrence à notre composant, nous l'appellerons _flvpb dans cet exemple, sélectionnez votre composant FLVPlayback puis ajouter cette occurrence dans le panneau propriétés :

Chargement de la vidéo

Je ne reviendrais pas sur la manière de générer des vidéos FLV, il existe diverses méthodes, reportez vous à l'article sur FFMPEG. Partons du principe que vous avez une vidéo appelée flim.flv dans le même répertoire que votre animation.

Passons maintenant à l'actionscript qui va s'en retrouver relativement réduit grâce à FLVPlayback, ouvrez une fenêtre de code sur le scénario et ajoutez y la ligne suivante :

this._flvpb.play ("film.flv");

Votre lecteur est ainsi prêt à lire la vidéo et possède une télécommande toute faite !

Conclusion

Il est donc très facile d'ajouter des vidéos sur internet grâce à ce composant, il présente néanmoins quelques inconvénients : votre animation sera plus lourde que si vous utilisez les classes NetStream, NetConnection et Video, d'environ 50ko, mais ce n'est pas énorme.

D'un autre côté vous gagnez un temps considérable et vous personnalisez facilement vos players vidéos dans vos pages web.

Partagez cet article !

  • Delicious
  • Stumbleupon
  • Digg
  • Facebook
  • Google
  • Linkedin
  • Yahoo Buzz
  • Twitter
Vous avez apprécié cet article ?

Commentaires S'abonner au flux RSS des commentaires

  1. Bonjour et merci pour ce tuto,
    comment ajouter un bouton custom pause svp ?
    merci !

Ajouter un commentaire

Les commentaires sont tous validés par un modérateur, votre commentaire n'apparaît pas directement sur le site.
Aucun support n'est assuré ici, vous pouvez néanmoins laisser vos remarques et critiques sur l'article, les points de vue pertinents sont toujours les bienvenus.