Archive pour décembre, 2008
Petits rappels sur la vidéo dans flash et ses formats : Flv, F4v, Mp4..
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 ^
Real City | Nike Blazer : quand les chaussures colorent la ville
RealCity | Nike Blazer ou quand vos chaussures colorent la ville. Le site tient dans un seul et unique effet de couleur qui se répand dans toute la ville. Il y a de quoi devenir fétichiste du pied… A noter une introduction en animation réalisée par le studio 4°C, célèbre pour ses créations originales au Japon, et ce n’est pas leur première collaboration avec Nike puisqu’ils avaient déjà réalisé trois spots pour Nike en 2004.
Le site renvoie ensuite vers l’impressionnant outil de personnalisation des chaussures, pour les commander ensuite. A voir aussi.
Twitter Friends Browser in 5k
Twitter Friends Browser dans une impressionnante de application de 5ko réalisée par Kris Temmerman qui permet de naviguer visuellement au travers de ses amis dans Twitter. Au vu des limites de l’API de twitter, c’est sûrement la meilleure application expérimentale visuelle et interactive qu’il y ait eu. Et j’aime toujours autant visualcomplexity chez qui je l’ai trouvé.
Nikon Connect
Après un certain constructeur téléphonique dont la baseline était ‘connecting people’, Nikon vous propose de créer une chaine de personnes en dessinant un tracé de lumière autour du monde, géocalisé. Esthétique, même si cela ne mène pas à grand chose, cela amène un brin de poésie dans un monde de brutes : (et ce n’est pas du chocolat) : http://nikon-connect.com/en/main.html.
Côté widget original, en voici un à rajouter à la liste, permettant de dessiner un tracé directement sur son blog :
Lire la suite
[billet musical] L’ambiance des fêtes envahit le web (3D, vidéo, webcams…)
Flash, vidéo, 3D, Iphone, tous les supports sont bons pour communiquer et se déchainer autour des fêtes de fin d’année ! (Et globalement, pour y échapper….) alors histoire de faire dans le marronnier, voici une petite sélection ainsi que pour la toute première fois, un billet à lire en musique ! (et je vous éviterais cette version là!)
Découvrez Frank Sinatra!
Allons-y donc :
De Pill and Pillow, studio basé à Hong Kong, qui a créé Merry Kiss’mas avec un peu de 3D en flash. « This Christmas, we kiss », « we created an ecard that you can kiss your friends and everyone »
Par Clemenger Group, Vodafone christmas clone, utilisant un dérivé adapté du célèbre cubecraft.
- Un flash asteroid 3D dans la neige : Flashteroids 3D
- Un père noel virtuel en réalité augmentée sur Iphone. C’est virtual Santa de Metaio, qui offre une formidable suite d’outils dédiée à cette technologie. ( Application gratuite !)
Tellart 2008 Holiday Card from Tellart on Vimeo.
- En réalité augmentée toujours, il s’agit là de rattraper ces petits flocons de neige qui flottent dans l’air. FLARToolkit + Papervision3D = Happy Holliday from Tellart
- Papervision + Flaartoolkit (de Noel ! ) :
Orange n’est pas en reste avec un calendrier de l’avant très marketing.
- Youtube relance ses e-cards pour les fêtes de noel
- Même le Java sur le web, (je ne savais pas que cela existait encore) est utilisé pour une petite carte de voeux avec flocons, s’il vous plait… sur http://xmas.postspectacular.com/
- En parlant d’ambiance de noel, un petit apercu des petites choses dans les univers virtuels très « costume de père Noël ». Et je rajoute à la liste un spécial sur IA world dont j’ai déjà parlé.
- Ambiance de Noel toujours, des fonds d’écrans en Flash Lite pour mobile !
Et enfin, une petite vidéo musicale à l’aide de micro-ondes de chez AKQA :
Via baekdal
Alors bien sûr, il y a aussi des thèmes firefox de Noël avec de la neige sur les onglets, des thèmes pour windows (oulà), des widgets de bureau (arbres de Noël), des icônes, mais on s’échappe du sujet principal…
