Je me rends compte avec effroi que tout le monde ne maîtrise pas vraiment la vidéo dans flash, alors allons-y pour les bases. Cela permettra peut-être d’éviter des erreurs de taille (et de poids !), même si je n’ai pas pour vocation de faire des tutoriaux…

Jouer avec de la vidéo sur le web en flash : comment ?
Plusieurs techniques :
- Intégrer directement la vidéo dans le swf. Pratique pour les interactions, l’intégration ou les transitions, mais destiné à des boucles ou des vidéos très courtes, car l’inconvénient est qu’il faut tout télécharger avant de commencer à le lire. (on pouvait avoir aussi à une époque un décalage de synchro vidéo/son sur des vidéos longues)
- séparer la vidéo du swf : permet le streaming ou le progressive download. Autorise ainsi la lecture dès que quelques secondes de vidéos sont chargées ou la lecture instantanée.

Historique et formats
Le format vidéo de prédilection de flash est le FLV. C’est ce que l’on appelle un conteneur, comme l’avi ou le mov. Il permet d’avoir différentes compressions vidéos à l’intérieur même de cette extension. Rapide historique

En 2002, avec flash 6, le codec Sorenson est apparu et a permis de lire de la vidéo en H263 sur le web le plus simplement du monde. Utilisé longtemps par Youtube, il n’a pas été spécialement apprécié par les amateurs de vidéos de qualité mais il a permis de démocratiser totalement la vidéo sur le web, et Youtube comme Viméo ont finalement migré vers le au H264 (j’y viens).

Avec Flash 8, le codec propriétaire On2 VP6 a complètement boosté la qualité et optimisé le poids des vidéos, instaurant une nouvelle ère de la vidéo interactive. De plus, le VP6 permettait la prise en charge du canal alpha, ouvrant la voie à des incrustations de personnes ou d’éléments interactifs sous fond vert/bleu dans la scène. Ajoutons l’effet de ‘smooth’ directement dans flash 8 qui permet de lisser une vidéo présentant des effets de petits carrés, un peu plus consommateur en ressources par contre.

En Aout 2007, ca se complique, mais pour le meilleur. La release beta 9.115 du player flash prends désormais en charge le mp4 et le H264 (enfin x264) tout en créant en parallèle un nouveau container : le F4V (f4a pour l’audio et f4p pour le mp4 avec DRM) avec du son en AAC et plus seulement en mp3.

Pourquoi avoir rajouté cette prise en charge de ce format ? Sans parler de support en plus de M4V, M4a ou de 3gp pour le mobile, je ferais court : Adobe s’est rapproché d’un standard, plus libre, permettant d’encoder avec une très bonne qualité la vidéo. De plus, le H264 permet la HD pour peu que l’on ait la bande passante suffisante (histoire de contrer l’avance prise par Silverlight à l’époque pour l’excellente qualité de sa compression en wmv). Cela a aussi permit à de nombreux acteurs de la vidéo en ligne de ne pas utiliser de codec propriétaire à licence/royalties… puisque FFMpeg, MeGui ou Mencoder côté serveur peuvent aussi à l’heure actuelle encoder en H264.(même si certains ont trouvé la parade depuis apparemment avec le VP6).

Comparaison
Quel est le codec de compression idéal ? Tout dépend du projet, mais une chose est certaine : le Sorenson H263 est un format préhistorique maintenant, lourd, de mauvaise qualité, à proscrire en 2009 (je prends de l’avance). Préférez un VP6 ou un H264… Je viens de refaire la comparaison, un VP6 est de meilleur qualité à débit de moitié inférieur à un Sorenson. (200 / 400kbps).

Entre le VP6 et le H264 ? C’est à peu près la même chose, même si les effets de compression sont différents (crénelage, flouté, perte de teinte/luminosité de couleur….). Je trouve que l’on perd un peu en intensité de couleur en h264… même s’il est censé être meilleur que le VP6.

Si le temps d’encodage est critique pour vous, faites attention au format source de la vidéo : un mp4 en source est très long à encoder en flv tandis qu’un simple avi tout bête en DV sera rapide. Autre détail à prendre en compte : le temps de l’encodage d’un même fichier en VP6 ou H264. Le H264 est plus long à encoder et il est plus consommateur en ressources CPU à la lecture.

La qualité est aussi importante : une vidéo très compressée à l’entrée en encodage ne vous donnera pas une meilleure vidéo en sortie. La source doit être impeccable !
;)

Encoder, comment ?

Le plus simple aujourd’hui reste de passer maintenant par le Adobe Media Encoder : il est fournit avec flash et autres logiciels de la suite d’Adobe, il est à l’heure actuelle de très bonne qualité, gérant avec la CS4 les batchs d’encodage, l’estimation du projet final et les différents profils de réglages. Il y a aussi MediaCoder ou Riva. Il existe bien sûr d’autres outils assez puissants (Turbine, Sorenzon Squeeze, Rhozet (ancien Canopus), Flix…), mais souvent payants et… beaucoup plus chers. (4 000€ pour un encodeur, dans un projet, ca plombe un peu l’ambiance…)

Note : tous les encodeurs se suivent et ne se ressemblent pas. Ils n’ont pas les mêmes performances en qualité de compression et de temps de calcul. Faites des tests si vous hésitez.

Note 3 : les outils payants ont des fonctions que les autres n’ont pas forcément. Je pense aux « watched folders » qui permettent d’encoder dans différents profils des vidéos déposées dans un dossier partagé à partir d’un réseau ou depuis internet, et de les renvoyer ensuite par FTP ailleurs….

Note 3 : attention par ailleurs aux metadata, ces petites informations incluses dans le FLV. Un encodeur inconnu peut ne pas les inclure, perdant ainsi des informations de durée, de débit etc… c’est pour cela que sont apparus des outils comme celui de Buraks : FLVMI. Sans metadata, oublions le streaming et la navigation efficace dans la vidéo.

Débit d’encodage et bande passante ?
La bonne question^ Cela dépend aussi de votre projet, mais il faut savoir qu’une vidéo très « standard » encodée à 550/600kbps ne gagnera pas forcément beaucoup en qualité si elle passe à 800kbps, toutefois si vous avez du traffic sur cette vidéo, cela représente une grosse montée en charge au niveau de la bande passante : 1/4. Et oui. Libre à vous de monter à 1500kb/s ou de faire de la HD si le coeur vous en dit mais il faut éviter que l’internaute n’attende trop le chargement…. ou que la plateforme ne supporte pas la charge.

Adobe a mis en ligne il y a quelques mois une calculette pour le débit optimal si jamais vous n’êtes pas sûr de vous ainsi qu’un autre article sur la taille recommandée que l’on peut utiliser pour étirer la vidéo. (Encoder en 320×240 mais on peut la visualiser avec une règle simple de multiples en 464×348) (septembre 2007 quand même, mais c’est un bon référent. Pour info, c’est ce que font Youtube et Dailymotion.)

Dernière chose : l’espace disque sur les serveurs ne coûte rien aujourd’hui. Par contre, la bande passante est une autre paire de manche. Think about it.

Paramètres d’encodage : CBR, VBR, FPS…
Il existe deux techniques d’encodage :
- Le CBR (Constant Bitrate Rate) et le VBR (Variable Bitrate Rate). En gros, le CBR diffuse en continu par exemple 500 kb à la seconde de donnée tandis que le VBR va analyser la vidéo pour réduire le débit lorsque l’image n’a pas de mouvement et remonter plus fortement lorsque l’image bouge beaucoup. Cette fourchette haut et bas est bien sûr paramétrable et elle permet d’optimiser énormément la qualité de la vidéo.

Pour le VBR, il y a l’analyse à la volée avec un 1-pass et l’analyse plus fine avec le 2-pass, plus longue à encoder. Un VBR 2-pass est préférable, car l’autre provoque des effets hilarants dans certains cas de compression dès que la vidéo entre en mouvement.

On peut jouer en fonction de la nature de la vidéo sur les FPS (Frame Per Second). Cas beaucoup plus rare, cela peut être utilisé lors de fonds animés plein écran en vidéo, cela marche bien, mais c’est vraiment occasionnel. Le risque est d’obtenir une vidéo saccadée si l’on tombe en-dessous des 25 images par seconde. (standard en Europe). Un 60 FPS avec de la HD donne une superbe fluidité à l’image mais… disons que c’est consommateur en bande passante… (euphémisme!)

Keyframe
Je fais court : une keyframe est l’image de référence à partir de laquelle la vidéo ensuite va rajouter ce qui a changé : mouvement, déplacement etc… Rajouter des keyframe va alourdir la vidéo, en enlever peut provoquer (notamment pour le streaming) des effets indésirables (de lapin bien sûr) dans la navigation.

Le son ?
Le poids du son doit s’ajouter à la vidéo bien sûr et il faut faire attention à la nature de la bande son. Si vous avez de la musique complexe, vous pouvez passer jusqu’à du 160 kbps en stéréo, mais pour de la voix, en fonction de sa nature, vous pouvez descendre à du mono, 64kbps et même moins, jusqu’à cibler un 11khz de fréquence d’échantillonage. (Cela s’entends dans tous les cas à l’oreille).

The end
Il existe d’autres choses à prendre en compte plus poussée comme la taille finale de l’export, le 4:3 et le 16/9ème, les keyframes, le désentrelacement, les filtres mais en laissant les paramètres par défaut, ca passe bien le plus souvent… et le but ici était d’arriver à s’y retrouver dans les différents formats, les basics quoi.

So…. la conclusion est : sauf si vous avez le malheur de devoir cibler flash 6 ou 7, le Sorenson H263 est vraiment mort : lourd, de mauvaise qualité, vieux. Même si l’on peut faire de très bons encodages avec, j’ai envie de dire : Oubliez-le.
;)

J’ai fait ce guide rapidement, mais si vous avez repéré une erreur, comme d’habitube, faites signe ^