L’actualité de la vidéo en streaming est intéressante en ce moment. En effet, avec la sortie de ffmpeg 0.6 et Gstreamer GP 0.10.23 / UP 0.10.15 / BP 0.10.19 supportant le codec WebM et avec l’approche des versions finales de Firefox 3.6 et Opera 10.60 pouvant lire le WebM (sans oublier Chrome), le passage en WebM de Fansub Streaming est imminent. J’appréhende le début des festivités quand même, ça fait un paquet d’épisodes à réencoder.

Mais puisqu’il faut trouver E = MC² avant de voir dans la pratique que l’énergie dégagée suffit à raser une ville entière de la carte, je dois bien préparer le terrain et adapter au mieux des streams pour un visionnage confortable pour tout le monde.

Dans l’ensemble je ne vous cache pas que c’est un sacré casse-tête, je reviendrai plus tard sur la façon de déterminer les meilleurs paramètres d’encodage pour obtenir une qualité équivalente (voire meilleure) que ffmpeg2theora 0.26 -v 7, tout en réduisant drastiquement le poids des fichiers (ça fera plaisir aux personnes non dégroupées, aux habitants de la France profonde, aux ressortissants étrangers (notamment Belges)… et aux abonnés Orange )

Non aujourd’hui je vais me contenter d’une étude portant sur la résolution idéale des vidéos.

Il ne vous aura pas échappé que depuis peu, tous les streams sur Fansub Streaming ont une adaptation à 100% de la largeur du bloc central, assurée par le navigateur. Que vous soyez en 640 x 480 (pouah !) ou en 2560 x 2048 (olalaaaa), il faut à la fois éviter la barre de défilement horizontale (chiante au possible) et une vidéo de taille rikiki (obligeant de zoomer). Solution: se servir d’un pourcentage, permettant au navigateur de calculer la largeur relative à la page et à la résolution d’affichage.

« au secours, Mitsukarenai il dit des choses je comprends pas ! »

Pas de panique, j’illustre

Ici en 800 x 600

Là en 1680 x 1050

Vous voyez ? Plus votre résolution d’affichage est grande, plus Yuki est grande

Si maintenant j’impose une largeur de 1000 pixels, voilà le résultat: une colonne entière qui disparait sous la vidéo qui déborde de son cadre (ça cache le bouton Facebook ça c’est pas grave, mais les liens sont cachés).

Remarque: avec Firefox les images sont au dessus

Mais alors pourquoi cet article, maintenant que ça s’adapte à 100% de la largeur dispo ? J’y viens.

Prenons une image, celle là par exemple:

Yuki

L’image originale fait 1280 x 960. Je vais la réduire à 320 x 240, méthode bilinéaire (comme les navigateurs pour la vidéo). Image en taille réelle.

Bilinéaire

Pourquoi pas la méthode Au plus proche, que les navigateurs utilisent pour redimensionner les images ? Parce que:

Au plus proche: ça pique les yeux

Bref. Je vais reprendre le 320 x 240, la passer en 160 x 120 et je vais la remettre en 1280 x 960, toujours avec la méthode Bilinéaire.

Retour en 1280 x 960

Comparez l’image d’origine et celle-là: du gâchis (on arrive même plus à lire « Nagato Yuki » ).

Voilà pourquoi il est nécessaire d’éviter le grand écart au navigateur entre la résolution de la vidéo et la résolution d’affichage de l’écran: si la vidéo est trop petite, sur les grands écrans ça fera comme sur la dernière image. Si la vidéo est trop grande, sur les petits écrans ça fera comme la 320 x 240 Bilinéaire.

Autre point: les vidéos sont pour l’instant redimensionnées et rendues par le processeur central (le décodage et traitement matériel par la carte graphique fera beaucoup de bien). Mais plus il y a de calculs lourds à faire pour adapter la vidéo à la résolution d’affichage, plus la charge processeur sera forte et moins la vidéo sera fluide. Donc toute la question c’est: trouver le juste milieu.

Problème: vous ne me facilitez pas la tâche:

Résolutions d'affichage

Il n’y a pour ainsi dire aucune résolution d’affichage qui sort du lot. Pire: il y a presque autant de résolutions minoritaires que les 4 principales. Meh.

Pas vraiment de majoritaire...

Il faut arriver à un compromis, non ? 90% des visiteurs sont entre 1680 x 1050 et 1024 x 768. Soit une moyenne simple de 1352 x 909.

Pour s’afficher correctement sans que le navigateur n’ait à réarranger les éléments, les colonnes de gauche et droite ont besoin de 400 pixels. Il reste donc 952 pixels pour le bloc central (940 environ si on prend en compte les marges et bordures).

Non mais je vous rassure: c’est de la théorie. Une vidéo 940 x 705 c’est atrocement lourd, pas possible d’en faire du streaming correct même pour des lignes ADSL 2+. Mais ce n’est pas le sujet du jour

Il reste à voir les capacités d’encodage/décodage avec WebM et le comparatif qualité/poids qui va bien. Pour ce qui est de la résolution, un conventionnel 640 x 480 fera l’affaire (la plupart des AMV sont déjà dans cette résolution, pour vous faire une idée).

Note: pour les redimensionnements lors de l’encodage, je ne vais pas utiliser les méthodes Au plus proche ou Bilinéaire (ni Bicubique d’ailleurs): pour préserver au maximum la qualité des contours (essentiel pour les japanimes à sous-titres), j’utiliserai la méthode Lanczos. Si ça vous parle: c’est une méthode d’anti-aliasing

Au plus proche vs. Lanczos: