La vidéo interactive

Contrôles de base de la vidéo

Les premières actions nécessaires pour la gestion d’une vidéo sont les contrôles de lecture. Dans cette première section, nous abordons les actions qui permettent de lire, arrêter, accélérer et rembobiner un flux vidéo, mais aussi modifier le volume sonore d’une vidéo associée à un composant FLVPlayBack. Exemples > ch8_videoInteractive_1.fla Dans le document « ch8_videoInteractive_1.fla », sur la scène, un composant vidéo joue la bande démo de la société gKaster. Au-dessous, une console contient différents boutons qui contrôlent le flux vidéo (voir Figure 8.1). Dans cette console, chaque symbole est disposé sur un calque séparé et possède un nom d’occurrence lui permettant de recevoir une action. Le symbole audio_mc, lui, contient deux MovieClip qui affichent chacun un état activé ou non activé, pour le contrôle du son. Ils possèdent également leur propre nom d’occurrence. Dans la fenêtre de scénario de la scène principale, au-dessus du calque fond_mc, apparaissent la console, le composant et un calque actions (voir Figure 8.2).  Dans le calque actions, nous pouvons lire le code suivant : // lecture automatique ecranVideo.autoPlay=true; // mise en cache ecranVideo.bufferTime=3000; // lire console_mc.lire_btn.addEventListener(MouseEvent.CLICK,jouerVideo); function jouerVideo (evt:MouseEvent) { ecranVideo.play(); } // arrêter console_mc.stop_btn.addEventListener(MouseEvent.CLICK,stopperVideo); function stopperVideo (evt:MouseEvent) { ecranVideo.stop(); } // suite console_mc.suite_btn.addEventListener(MouseEvent.CLICK,suiteVideo); function suiteVideo (evt:MouseEvent) { ecranVideo.seek(ecranVideo.playheadTime+2) } Figure 8.1 Aperçu après publication. Figure 8.2 Aperçu du scénario de la scène principale // retour console_mc.retour_btn.addEventListener(MouseEvent.CLICK,retourVideo); function retourVideo (evt:MouseEvent) { ecranVideo.seek(ecranVideo.playheadTime-2) } // Audio console_mc.audio_mc.audioOff_mc.visible=false; console_mc.audio_mc.audioOff_mc.buttonMode=true; console_mc.audio_mc.addEventListener(MouseEvent.CLICK,audioVideo); function audioVideo (evt:MouseEvent) { if (ecranVideo.volume>0) { ecranVideo.volume=0; evt.target.visible=false; console_mc.audio_mc.audioOff_mc.visible=true; } else { ecranVideo.volume=1; evt.target.visible=false; console_mc.audio_mc.audioOn_mc.visible=true; } } Voici le descriptif détaillé des différentes fonctionnalités rassemblées dans cette console. Lecture automatique La première ligne spécifie si le composant nommé ecranVideo doit jouer automatiquement dès l’affichage de l’animation (true) où s’il doit attendre une action de l’utilisateur (false). L’action est activée sur true. La vidéo joue donc automatiquement dès la publication : // lecture automatique ecranVideo.autoPlay=true; Mise en cache Une seconde action affecte directement le signal vidéo contrôlé par le composant vidéo. C’est la mise en cache. La propriété bufferTime permet d’indiquer le nombre de millisecondes à attendre avant d’exécuter la lecture du flux vidéo. Cette indication permet de réduire les risques de rupture de flux pour les connexions faibles. Ici, la valeur portée à 3 000 désigne une attente de trois secondes avant le démarrage de la vidéo : // mise en cache ecranVideo.bufferTime=3000; La valeur assignée par défaut à la propriété bufferTime est 5 000. Elle ne peut pas être modifiée depuis l’Inspecteur de composants.

Accélérer la vidéo

Il est possible d’accélérer la lecture de la vidéo en positionnant la tête de lecture de la vidéo à une image plus éloignée que l’image courante. Pour effectuer ce calcul, nous affectons d’abord la propriété playheadTime au composant vidéo pour permettre de capturer la position courante de la tête de lecture. Puis, nous augmentons la valeur, obtenue par cette propriété, de quelques images ou secondes. Nous passons ensuite directement cette valeur en paramètre de la méthode seek() qui permet de repositionner la tête de lecture dans la vidéo : // suite console_mc.suite_btn.addEventListener(MouseEvent.CLICK,suiteVideo); function suiteVideo (evt:MouseEvent) { ecranVideo.seek(ecranVideo.playheadTime+2) } Les valeurs que nous passons en paramètre sont des nombres. La méthode seek() renvoie la tête de lecture à une position qui correspond toujours à l’image-clé suivante la plus proche dans le flux vidéo. La précision du ciblage dépend donc directement du nombre d’imagesclés encodées dans le flux vidéo. La vidéo que nous traitons a été encodée avec un nombre d’images-clés défini sur Automatique. Cette valeur, dans Adobe Media Encoder, spécifie en réalité un intervalle de deux secondes entre chaque image-clé. Pour obtenir une navigation plus précise que par pas de deux secondes, il convient donc de revenir sur la compression en modifiant cette valeur à un intervalle plus serré. Rappelez-vous cependant que plus un intervalle est serré, plus l’encodeur ajoute des images-clés. Or, chaque image-clé augmente le poids et, à poids égal, à taux de compression égal, à débit égal, l’ajout d’images-clés réduit la place disponible pour encoder les autres images. Cela détériore donc l’ensemble de la vidéo. Un paradoxe que l’on peut résoudre très simplement : en augmentant les valeurs des réglages de compression et de débit. Le pas d’incrémentation utilisé dans notre exemple est 2 (deux secondes). La tête de lecture est donc déplacée à l’image-clé la plus proche à deux secondes d’intervalle après la position courante du flux vidéo et reprend la lecture de la vidéo à partir de cette image. Dans notre exemple, le repositionnement appelle donc toujours la deuxième image-clé située après la position courante de la tête de lecture et poursuit la lecture de la vidéo à partir de cette image, car c’est toujours l’image-clé suivante, la plus proche de l’image invoquée, qui est affichée. Notez qu’une valeur de recherche élevée et une vidéo avec des plans assez longs peuvent contribuer à masquer le manque de précision induit par la méthode seek() et par un type de compression impliquant un faible nombre d’images-clés. Rembobiner la vidéo De la même manière que nous pouvons accélérer la vidéo, nous la rembobinons avec la méthode seek() et la propriété playheadTime. Mais, ici, nous retranchons la valeur à la position courante du flux vidéo de sorte à revenir deux seconde en arrière, à chaque clic sur le bouton retour : // retour console_mc.retour_btn.addEventListener(MouseEvent.CLICK,retourVideo); function retourVideo (evt:MouseEvent) { ecranVideo.seek(ecranVideo.playheadTime-2) } Modifier le volume audio La méthode volume() permet de modifier le volume sonore global de la vidéo. La valeur à passer en paramètre est 1 pour un volume normal et 0 pour un son muet. Les valeurs décimales intermédiaires permettent de nuancer le volume. Dans notre exemple, dans le MovieClip console_mc, nous pouvons identifier le symbole audio_mc. Ce dernier contient lui-même deux autres clips dont audioOff_mc qui affiche un trait rouge et audioOn_mc qui reste neutre. Nous spécifions ici qu’en cliquant sur chaque symbole contenu dans audio_mc (evt.target), nous modifions le volume audio de la vidéo. Au premier clic, le son devient muet, et au suivant, il redevient normal, et ainsi de suite. Une condition permet de vérifier si le volume est déjà muet ou non et inverse la valeur selon le résultat. Pour que le dispositif soit plus ergonomique, nous ajoutons un contrôle de visibilité sur chacun des boutons de sorte que l’un disparaît à chaque fois qu’on l’active, et laisse alors l’autre prendre sa place : console_mc.audio_mc.audioOff_mc.visible=false; console_mc.audio_mc.audioOff_mc.buttonMode=true; console_mc.audio_mc.addEventListener(MouseEvent.CLICK,audioVideo); function audioVideo (evt:MouseEvent) { if (ecranVideo.volume>0) { ecranVideo.volume=0; evt.target.visible=false; console_mc.audio_mc.audioOff_mc.visible=true; } else { ecranVideo.volume=1; evt.target.visible=false; console_mc.audio_mc.audioOn_mc.visible=true; } }