Introduction

Dans cette ressource, nous allons découvrir la simplicité avec laquelle une vidéo peut-être diffusée sur Internet, mais nous n'allons pas nous limiter à une simple diffusion. En effet, tout l'intérêt de passer par une animation Flash pour  proposer à un internaute de consulter une vidéo est de pouvoir combiner les possibilités qu'offre l'ActionScript avec la lecture d'un flv (vidéo au format Flash).

Si vous n'avez pas besoin d'une réelle interactivité lors de la diffusion d'une vidéo dans un .swf, dans ce cas, vous n'êtes pas obligé de faire appel à l'ActionScript et seules les premières lignes de cette page vous seront utiles. Dans le cas contraire, vous allez découvrir qu'il existe de nombreuses possibilités d'interactions avec une vidéo !!!

Encoder une vidéo

Avant d'apprendre à intégrer ou importer dynamiquement une vidéo dans une animation Flash, vous devez apprendre à l'encoder, c'est-à-dire la "compresser" . Il est important de savoir que seuls les formats .flv et .mov en H264 sont compatibles à la lecture d'une vidéo dans une animation Flash. Attention, le codec H264 n'est reconnu qu'à partir du player Flash version 9,0,115,0, n'encodez donc vos vidéos en .mov avec le codec H264 uniquement si l'animation Flash vérifie le numéro de version du player (consultez la ressource intitulée "Informations utilisateur" pour savoir comment récuperer cette information). D'ici le premier trimestre 2009, cette vérification ne devrait plus être nécessaire.

Pour encoder une vidéo, il existe de nombreuses solutions logicielles, payantes et gratuites, mais si vous avez installé correctement Flash CS3, l'application Flash CS3 Video Encoder s'est installée également dans le dossier Adobe qui se trouve lui-même à la racine du dossier Applications de votre ordinateur. Vous pouvez également passer par le logiciel QuickTime Player en le lançant, vous retomberez de toutes les façons sur l'interface du Flash CS3 Video Encoder.

1. Lancez l'application Flash CS3 Video Encoder.
2. Faites glisser des fichiers de type vidéo que vous souhaitez encoder, dans la fenêtre principale de l'application.
3. Sélectionnez le ou les fichiers que vous souhaiter encoder avant de cliquer sur le bouton Paramètres. En cliquant sur ce dernier,
4. vous vous aprêtez à spécifier les pramètres de compression des fichiers que vous avez séléctionné.
5. Réglez les paramètres de compression vidéo et audio, sans oublier de recadrer ou redimensionner l'image de votre séquence si vous en avez besoin.

Préréglages par défaut

Si vous ne voulez pas régler par vous même les différents paramètres que nous allons passer en revue, vous pouvez sélectionner dans le menu  de la copie d'écran ci-dessous, le profil  d'encodage qui effectue pour vous des réglages de compression audio et vidéo. Attention, choisissez toujours au minimum un profil Flash 8, c'est préférable si vous souhaiter obtenir une bonne qualité d'image et optezgalement au minimum pour une qualité moyenne. Dans le cas où la diffusion de votre vidéo se ferait off-line (pas sur Internet), sélectionnez le profil Flash 8 - Qualité élevée. Pour finir, si vous ne spéciez pas de nom de fichier de sortie, celui qui sera donné à chaque fichier encodé sera le nom actuel avec l'extension .flv.

Les réglages vidéos

Avant d'effectuer les premiers réglages de compression de votre vidéo, si vous en avez besoin, vous pouvez définir les points d'entrée et  de sortie de votre séquence, elle sera alors au final plus courte que la durée actuelle, mais vous aurez au moins retiré les premières et dernières images de votre vidéo que vous ne voulez pas voir apparaitre dans votre vidéo encodée. Faites tout simplement glisser les deux taquets (représentés par des triangles, entourés par les carrés rouges de la copie d'écran ci-dessous) vers l'intérieur de la fenêtre, tout en vérifiant les images qui défilent dans le haut de la fenêtre.

1. Sélectionnez toujours le codec vidéo On2 VP6.
2. Ne spécifiez pas une qualité précise (basse, moyenne ou élevée), mais saisissez plutôt une valeur dans la case "Débit de données max. : ". Pour un format d'image de 300 à 500 pixels de largeur, indiquez une valeur comprise entre 350 et 450 kbits. Notons tout de même que plus vous spécifiez  une valeur élevée, plus le débit de la bande passante de l'internaute doit être élevé. Le conseil le plus sage que nous serions vous donner est de faire vos propres tests de compression, mais ne perdez pas de vue qu'ils devront être fait en ligne.
3. Dans la mesure où vous ne pouvez pas connaître la composition précise d'un séquence vidéo, il est très difficile de faire un autre choix que de sélectionner "Automatique" pour l'intervalle des images-clés.
4. Concernant la cadence, conservez la valeur proposée par défaut , "Identique à la source". Si vous souhaitez réellement diminuer le nombre d'images par secondes (ips), optez alors pour une valeur correspondant à la moitié de celle en cours.
5. Pour finir, ne cochez la case Désentrelacer que dans le cas où vous devez encoder une vidéo qui provient d'une source vidéo (ex. : un fichier .dv).
6. Cochez la case "Coder le canal alpha" uniquement si votre vidéo possède réellement une couche alpha, c'est-à-dire une couche qui définit des zones de transparence dans la vidéo.

Les réglages audios

Conservez le réglage par défaut qui offre une bonne qualité d'écoute. Décochez éventuellement la case "Coder les données audio" dans le cas où vous souhaiteriez obtenir une vidéo encodée sans piste audio.

Recadrer une vidéo

Commencez par recadrer votre vidéo avant de la redimensionner. Quel que soit l'ordre de vos réglages, observez attentivement les dimensions finales de votre vidéo qui figurent en bas à gauche de la fenêtre (720x404 dans l'exemple de la copie d'écran ci-dessous).

Voilà, vous savez à présent  configurer les paramètres de compression d'une vidéo, il ne vous reste plus qu'à faire vos propres tests pour bien vous approprier cette technique qu'est l'encodage d'un fichier.

Placer manuellement une vidéo sur la scène

Pour placer une vidéo sur la scène, vous pouvez le faire de deux façons : Manuellement ou à partir de lignes d'instructions, détaillons tout de suite l'approche manuelle.

1. Via le menu Fenêtre sélectionnez la commande Composants.
2. Déroulez la liste des composants de type Video (clic sur le triangle (Mac) ou sur le carré contenant le signe plus dans un carré (Windows).
3. Faites glisser le composant de type FLVPlayback sur la scène.
4. Via le menu Fenêtre sélectionnez la commande Inspecteur de composant.

5. Cliquez deux fois à droite du mot Source.
6. Cliquez sur l'icône de répertoire située à droite de la fenêtre.
7. Localisez un fichier au format .flv.
8. Validez votre choix.
9. Cochez la case "Ajustez aux dimensions du FLV source" si elle ne l'est pas.
10. Fermez la fenêtre en cliquant sur le bouton "OK".

Voilà, si vous publiez votre animation, vous constaterez que la vidéo se lit correctement. Si vous avez réalisé cette manipulation sans difficulté, nous vous recommandons d'essayer d'intégrer une vidéo à partir de lignes d'instructions.

Par ailleurs, vous pouvez également intégrer une vidéo manuellement sur la scène (les étapes 1 à 3 de l'énumération ci-dessus) et spécifier le chemin à partir d'une ligne d'instruction. Dans ce dernier cas, vous devrez tout de même nommer votre occurrence de type FLVPlayback.

Remarque : Dans la fenêtre qui s'affiche lorsque vous indiquez la "source" d'une occurrence de type FLVPlayback à partir de la fenêtre Inspecteur de composant, il arrive parfois que le "chemin du contenu" soit une adresse absolue et non relative. Vous devez alors supprimer le début de l'adresse que Flash a saisi automatiquement pour vous. Ce bug démontre qu'il est vraiment préférable d'indiquer la source d'une occurrence de type FLVPlaybac k à partir de lignes d'instructions.

ATTENTION : Pour la suite des points qui vont suivre (jusqu'à la fin de cette page), vous devez  placez le composant de type FLVPlayback dans la bibliothèque de votre animation, mais vous ne devez plus le placer vous même sur la scène.

Placez dynamiquement une vidéo sur la scène

La technique qui va suivre présente l'avantage de ne pas avoir à gérer manuellement le placement d'une occurrence de type FLVPlayback, vous évitant ainsi toutes les manipulations que nous venons d'aborder ensemble ci-dessus, mais en revanche, vous ne pouvez pas visualiser l'emplacement et l'encombrement d'une occurrence de type FLVPlayback sur la scène. Dans ce cas, créez un calque que vous transformez en guide et tracez un rectangle de la largeur et la hauteur de la taille de l'occurrence de type FLVPlayback que vous vous apprêtez à placer dynamiquement.

1. Via le menu Fenêtre sélectionnez la commande Composants.
2. Déroulez la liste des composants de type Video (clic sur le triangle (Mac) ou sur le carré contenant le signe plus dans un carré (Windows).
3. Faites glisser le composant de type FLVPlayback dans la bibliothèque de votre animation.
4. Saisissez le script ci-dessous dans la fenêtre Actions.

import fl.video.FLVPlayback;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

Attention : Changez le nom  de fichier "luna.flv" par le nom de votre vidéo. De plus, les valeurs 384 et 216 doivent être également modifiées afin que vous puissiez régler les dimensions de votre vidéo (l'occurrence de type FLVPlayback).

Attention "bis repetita" : Le chemin (source) que vous indiquez doit être relatif à l'emplacement de votre .swf le temps du développement dans Flash, mais avant de placer vos fichiers (page HTML, .swf, .flv et la skin (autre fichier .swf) sur le serveur, adaptez le chemin qui doit être relatif à la page HTML.

[Télécharger le .fla]

Afficher une vidéo plein écran

La technique qui perme d'afficher une vidéo plein écran ne présente aucune difficulté car vous n'avez pas besoin de programmer la moindre ligne de code, ni même besoin de faire une quelconque  manipulation de votre occurrence sur la scène. Vous allez simplement devoir sélectionner une commande dans un menu.

1. Fichier/Paramètres de publication.
2. Cliquez sur l'onglet HTML.
3. Dans le menu  "Modèle", sélectionnez la commande  "Flash seulement - Autorisation du plein écran".
4. Cliquez sur le bouton "Publier" situer en bas de la fenêtre.

Ajouter un contrôleur à une vidéo créée dynamiquement

Pour commencer, ouvrez le dossier qui se trouve à l'adresse suivante :

Adobe Flash CS3/Configuration/FLVPlayback Skins/ActionScript 3.0

Choisissez un fichier que vous placez ensuite dans le dossier qui contient votre animation .fla. Ajoutez les lignes d'instructions ci-dessous à votre script principal.

ecran.skin = "ma_skin.swf";

ecran.skinBackgroundColor = 0xAB99CB;

ecran.skinBackgroundAlpha = 0.8;

ecran.skinAutoHide = true;

Remarque : Si vous avez choisi un fichier SWF (skin) qui correspond à une contrôleur sous la vidéo (under et non over), vous n'aurez pas besoin de spécifier la ligne d'instruction qui contient la propriété skinAutoHide.

Contrôler la lecture et la pause d'une vidéo

1. Créez deux symboles de type Clip qui représentent des boutons de lecture et de mise en pause d'une vidéo.
2. Placez les sur la scène s'ils n'y sont plus.
3. Nommez les occurrences obtenues : boutonLecture et boutonPause.
4. Placez le script ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

boutonLecture.addEventListener(MouseEvent.MOUSE_DOWN,lireVideo);

function lireVideo(evt:MouseEvent) {

ecran.play();

}

boutonPause.addEventListener(MouseEvent.MOUSE_DOWN,mettreEnPause);

function mettreEnPause(evt:MouseEvent) {

ecran.pause();

}

Comme vous l'aurez deviné, les méthodes play() et pause() servent à contrôler respectivement la lecture et la mise en pause d'une vidéo.

[Télécharger le .fla]

Réaliser un bouton unique "Lecture/Pause"

1. Créez un symbole de type clip qui contient deux images-clés. Sur la première des deux images, dessinez l'apparence d'un bouton symbolisant la lecture d'un média. Sur la deuxième, dessinez l'apparence d'un bouton symbolisant la mise en pause d'un média.
2. Placez le sur la scène s'il ne l'est plus.
3. Nommez l'occurrence obtenue : boutonLecturePause.
4. Placez le script ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

boutonLecturePause.gotoAndStop(2);

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

boutonLecturePause.buttonMode = true

boutonLecturePause.addEventListener(MouseEvent.MOUSE_DOWN,lireVideo);

function lireVideo(evt:MouseEvent) {

if (ecran.state=="playing") {

ecran.pause();

boutonLecturePause.gotoAndStop(1);

} else {

ecran.play();

boutonLecturePause.gotoAndStop(2);

}

}

Grâce à la propriété state, nous pouvons connaître l'état d'une vidéo. A l'aide d'un test (avec un if()), nous évaluons la valeur de la propriété state afin de mettre la vidéo pause ou de la mettre en lecture.

[Télécharger le .fla]

Déplacer la tête de lecture à un instant précis dans la vidéo (Méthode 1)

1. Créez un symbole de type clip (peu importe son apparence, il peut s'agir d'un simple rond).
2. Placez le sur la scène s'il ne l'est plus et dupliquez l'occurrence obtenue afin d'en obtenir un total de 3.
3. Nommez les occurrences  : btInstant1, btInstant2, btInstant3.
4. Placez le script ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

btInstant1.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant1);

btInstant2.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant2);

btInstant3.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant3);

function allerInstant1(evt:MouseEvent) {

ecran.seek(2);

}

function allerInstant2(evt:MouseEvent) {

ecran.seek(5);

}

function allerInstant3(evt:MouseEvent) {

ecran.seek(7);

}

La méthode seek() permet de déplacer la tête de lecture à un temps précis exprimé en secondes que vous saisissez entre les parenthèses (de la méthode).

[Télécharger le .fla]

Déplacer la tête de lecture à un instant précis dans la vidéo (Méthode 2)

1. Créez un symbole de type clip (peu importe son apparence, il peut s'agir d'un simple rond).
2. Placez le sur la scène s'il ne l'est plus et dupliquez l'occurrence obtenue afin d'en obtenir un total de 3.
3. Nommez les occurrences  : btInstant1, btInstant2, btInstant3.
4. Placez le script ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

btInstant1.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant);

btInstant2.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant);

btInstant3.addEventListener(MouseEvent.MOUSE_DOWN,allerInstant);

btInstant1.temps=2;

btInstant2.temps=5;

btInstant3.temps=7;

function allerInstant(evt:MouseEvent) {

ecran.seek(evt.currentTarget.temps);

}

[Télécharger le .fla]

Gérer les repères (Cue Points) dans une vidéo

1. Placez sur la scène, un texte dynamique.
2. Nommez l'occurrence. Exemple : messageVideo
3. Placez le script ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

import fl.video.MetadataEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addASCuePoint(3,"Que cherche l'enfant ?");

ecran.addASCuePoint(6,"Où pense aller l'enfants ?");

ecran.addASCuePoint(10,"L'enfant peut-il voir très loin ?");

ecran.addEventListener(MetadataEvent.CUE_POINT,repereAtteint);

function repereAtteint(evt:MetadataEvent) {

messageVideo.text = evt.info.name;

}

Voici le premier script qui contient le premier gestionnaire d'évènement lié à la video, MetadataEvent.CUE_POINT ! Il permet de surveiller la lecture d'un cue point, c'est-à-dire un repère de temps. La méthode addASCuePoint() permet  dans un premier temps d'ajouter un repère de temps à un instant précis de la vidéo et d'attribuer une étiquette (qualifiée de "nom de repère"). Dans un deuxième temps, nous avons besoin de faire appel à un écouteur pour la détection du passage de la tête de lecture sur un cue point.

nomOccurrencedeTypeFLVPlayback.addEventListener(MetadataEvent.CUE_POINT,repereAtteint);

function repereAtteint(evt:MetadataEvent) {

//ligne d'instruction à exécuter lorsqu'un cue point est détecté.

}

Lorsqu'un cue point est détecté, il est alors possible d'exécuter n'importe quelle ligne d'instruction, mais pour information, il est très utile d'exploiter le nom du repère, c'est-à-dire l'étiquette associé au temps de la méthode addASCuePoint(). Si vous savez gérer le XML, il est même très intéressant de donner des numéros en guise de nom d'étiquette aux cue points, vous utiliserez alors ces valeurs pour parcourir une arborescence XML.

[Télécharger le .fla]

Mettre une vidéo en pause automatiquement (en fonction de repères)

Le script ci-dessous est tout simplement un exemple qui combine les points abordés ci-dessus.

import fl.video.FLVPlayback;

import fl.video.MetadataEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

btLecture.mouseEnabled = false;

btLecture.alpha = 0.5;

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addASCuePoint(3,"Que cherche l'enfant ?");

ecran.addASCuePoint(6,"Où pense aller l'enfants ?");

ecran.addASCuePoint(10,"L'enfant peut-il voir très loin ?");

ecran.addEventListener(MetadataEvent.CUE_POINT,repereAtteint);

function repereAtteint(evt:MetadataEvent) {

messageVideo.text = evt.info.name

btLecture.mouseEnabled = true;

btLecture.alpha = 1;

ecran.pause();

btLecture.buttonMode = true;

}

btLecture.addEventListener(MouseEvent.MOUSE_DOWN,lireVideo);

function lireVideo(evt:MouseEvent) {

messageVideo.text=""

btLecture.mouseEnabled = true;

btLecture.alpha = 0.5;

ecran.play();
}

[Télécharger le .fla]

Gérer les repères d'une vidéo avec du XML

Comme nous l'évoquions ci-dessus, voici un exemple de script qui fait appel à un fichier XML lorsqu'un repère est atteint.

1. Créez un fichier XML qui contient les noeuds suivants :

Je cherche encore…

J'ai trouvé et …

Mais où est mon doudou ?

2. Saisissez les lignes d'instructions ci-dessous dans la fenêtre Actions de votre animation.

import fl.video.FLVPlayback;

import fl.video.MetadataEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.autoPlay = false;

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addASCuePoint(3,"0");

ecran.addASCuePoint(6,"1");

ecran.addASCuePoint(10,"2");

ecran.addEventListener(MetadataEvent.CUE_POINT,repereAtteint);

var adresseFichier:URLRequest = new URLRequest("legendeFilm.xml");

var chargeDonnees:URLLoader = new URLLoader();

var donneesXML:XML;

chargeDonnees.load(adresseFichier);

chargeDonnees.addEventListener(Event.COMPLETE,lancerLecture);

function lancerLecture(evt:Event) {

donneesXML = new XML(chargeDonnees.data);

ecran.play();

}

function repereAtteint(evt:MetadataEvent) {

messageInfo.text = donneesXML.soustitre[evt.info.name];

}

[Télécharger le .fla]

Savoir lorsqu'une vidéo est terminée

Pour réaliser cet exemple, placez simplement sur la scène, un texte dynamique et nommez son occurrence. Exemple : messageInformation.

import fl.video.VideoEvent;

ecran.addEventListener(VideoEvent.COMPLETE,lectureTerminee);

function lectureTerminee(evt:VideoEvent) {

messageInformation.text = "Fin";

}

Réaliser une jauge de lecture

Pour réaliser cet exemple, placez simplement sur la scène, un symbole de type clip qui représente un rectangle dans le sens de la largeur et nommez l'occurrence obtenue. Exemple : jaugeLecture. L'évènement VideoEvent.PLAYHEAD_UPDATE permet d'exécuter en continu (tant que la vidéo est en lecture), la mise à l'échelle d'une occurrence (le rectangle dans le sens de la largeur). Les propriétés playheadTime et totalTime permettent de connaitre respectivement la position de la tête de lecture (valeur exprimée en secondes) et la durée totale de la vidéo (valeur exprimée également en secondes).

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.playheadUpdateInterval = 100;

ecran.addEventListener(VideoEvent.PLAYHEAD_UPDATE,miseAJourJauge);

function miseAJourJauge(evt:VideoEvent) {

jaugeLecture.scaleX = ecran.playheadTime/ecran.totalTime;

}

ecran.addEventListener(VideoEvent.COMPLETE,lectureTerminee);

function lectureTerminee(evt:VideoEvent) {

jaugeLecture.scaleX = 0;

}

[Télécharger le .fla]

Enchainer la lecture de plusieurs vidéos

Préparez 3 vidéos au format .flv et nommez les Luna.flv, Marine.flv et Luna2.flv.

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

var listeFilms = ["Luna.flv","Marine.flv","Luna2.flv"];

var legendes = ["Luna marche…","Marine est là","Luna aussi"];

var numeroFilm = 0;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

legende.text = legendes[numeroFilm];

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addEventListener(VideoEvent.COMPLETE,lectureTerminee);

function lectureTerminee(evt:VideoEvent) {

if (numeroFilm

numeroFilm++;

ecran.source = listeFilms[numeroFilm];

legende.text = legendes[numeroFilm];

}

}

Comme nous l'avons déjà vu dans l'un des exemples abordé ci-dessus, nous pouvons savoir lorsqu'une vidéo est terminée, nous utilisons donc ce gestionnaire d'évènement pour pouvoir relancer une autre vidéo dont le nom figure dans une liste. La variable numeroFilm qui s'incrémente permet d'indiquer l'index de la liste listeFilms que nous parcourons.

[Télécharger le .fla]

Sélectionner une vidéo à partir d'une liste de textes cliquables

Placez un texte dynamique sur la scène et rendez son occurrence multilignes. Nommez la également listeFilms. Augmentez la hauteur de cette zone de texte afin que 3 lignes puissent être affichées.

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

listeFilms.appendText("Luna\n");

listeFilms.appendText("Marine\n");

listeFilms.appendText("Luna2\n");

var films = ["Luna.flv","Marine.flv","Luna2.flv"];

listeFilms.addEventListener(MouseEvent.MOUSE_DOWN,lireVideo);

function lireVideo(evt:MouseEvent) {

var numeroLigneCliquee = listeFilms.getLineIndexAtPoint(listeFilms.mouseX,listeFilms.mouseY);

ecran.source = films[numeroLigneCliquee];

}

[Télécharger le .fla]

Connaitre l'état de Lecture/Pause d'une vidéo

Pour réaliser cet exemple, placez simplement sur la scène, un texte dynamique et nommez son occurrence. Exemple : messageInfo.

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

ecran.skin = "ma_skin.swf";

ecran.skinBackgroundColor = 0xAB99CB;

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addEventListener(VideoEvent.PAUSED_STATE_ENTERED,pauseActivee);

ecran.addEventListener(VideoEvent.PLAYING_STATE_ENTERED,lectureActivee);

function pauseActivee(evt:VideoEvent) {

messageInfo.text = "Pause";

}

function lectureActivee(evt:VideoEvent) {

messageInfo.text = "";

}

[Télécharger le .fla]

Afficher le temps écoulé d'une vidéo sous le format 00:00:00

Pour réaliser cet exemple, placez simplement sur la scène, un texte dynamique et nommez son occurrence. Exemple : messageInfo.

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

var ecran:FLVPlayback = new FLVPlayback();

addChild(ecran);

ecran.source = "Luna.flv";

var positionTete:Number;

var heures:*;

var minutes:*;

var secondes:*;

ecran.setSize(384,216);

ecran.x = 8;

ecran.y = 8;

ecran.addEventListener(VideoEvent.PLAYHEAD_UPDATE,lectureEnCours);

ecran.playheadUpdateInterval = 500;

function lectureEnCours(evt:VideoEvent) {

positionTete = ecran.playheadTime;

heures = Math.floor(positionTete/3600);

minutes = Math.floor(positionTete/60);

secondes = Math.floor(positionTete%60);

heures= heures<=9 ? "0"+heures : heures;

minutes= minutes<=9 ? "0"+minutes : minutes;

secondes= secondes<=9 ? "0"+secondes : secondes;

messageInfo.text = heures+":"+minutes+":"+secondes;

}

[Télécharger le .fla]