Sur Fansub Streaming, il y a des streams :) Autour de 1000 streams WebM, intégrés en HTML 5.

Dans cet article, nous allons apprendre la théorie sur le format WebM, ainsi que l’intégration de streams WebM dans les pages web :) La création de ces fichiers WebM ça sera pour un article ultérieur.

HTML 5: la guerre des formats

Container	Format typique du flux vidéo	Format typique du flux audio	Soumis à payement de royalities
OGG	Theora	Vorbis	non
MP4	MPEG-4 AVC « H.264″	AAC	oui (au MPEG-LA)
WEBM	VP8	Vorbis	non

Support des formats dans les navigateurs et version minimale:

	Internet Explorer	Mozilla Firefox	Google Chrome	Apple Safari	Opera Software
OGG	non	oui (3.5)	oui (3)	non	oui (10.50)
MP4	oui (9)	non	non	oui (3.1)	non
WEBM	non	oui (4)	oui (6)	non	oui (10.60)

Contexte: le web s’est depuis toujours développé autour de formats exempts de tout payement de royalities: vous pouvez utiliser ces formats sans vous acquitter d’une licence d’utilisation auprès de son ayant-droit. Mais coup de théâtre lors de la normalisation HTML 5 portant sur les éléments multimédia (vidéo et audio): le W3C n’exige pas de la part des navigateurs qu’ils n’utilisent pas de formats soumis à royalities. Deux intervenants ont immédiatement pris position, l’un contre l’autre: Apple et Mozilla. Le premier, qui possède des droits sur le format MPEG-4 AVC, poussa ce format dans son navigateur Safari. Le second, qui défend l’ouverture du web, s’appuya sur le seul format libre de tout royalities ayant été suffisamment développé alors: Theora.

Problème: si MPEG-4 AVC est unanimement reconnu comme le format vidéo à compression DCT le plus puissant du moment, Theora accuse un sérieux retard technologique, qui le place à peine mieux que MPEG-4 ASP, très connu sous l’appellation « DivX » .

La situation aurait pu durer si entre temps un nouveau mastodonte n’entra pas dans l’arène: Google inclua à Chrome à la fois des décodeurs MPEG-4 AVC et Theora. Et puis ils rachetèrent On2, l’entreprise qui créa le format VP3 dont est dérivé Theora: entre temps ils avaient développé de nouveaux formats, dont leur plus récent: VP8. Ce dernier, Google le plaça sous une licence spécifique « royality-free » , ce qui autorisa les autres défenseurs du web ouvert de supporter le format. VP8 est l’un des formats les plus proches de MPEG-4 AVC, réduisant drastiquement la différence qualitative entre MPEG-4 AVC et les formats « royality-free » .

Si Google, Mozilla et Opera Software se sont clairement positionnés en faveur des formats « royality-free » , Microsoft ne soutient que mollement MPEG-4 AVC (support à partir de Internet Explorer 9 seulement, parts de marché faibles) et Apple se retrouve isolé. Surtout que Google, avec sa plateforme Youtube, a le rôle de chef d’orchestre en la matière (et ce d’autant plus que les iPhone et iPad ne supportent pas Flash).

Les meilleurs encodeurs à l’heure actuelle

Un format peut avoir une qualité médiocre comme excellente, tout dépend de la puissance de l’outil utilisé pour générer ce format. On ne peut que difficilement comparer des formats entre eux, par contre on peut bien comparer les encodeurs. Dont voici quelques uns les plus efficaces actuellement (meilleure qualité pour un poids équivalent)

Encodeur	Éditeur	Format	Licence
libtheora	Xiph	Theora	BSD
x264	VideoLAN	MPEG-4 AVC	GNU GPL
Squeeze	Sorenson	MPEG-4 AVC	propriétaire
libvpx	Google	VP8	BSD renforcé

libtheora est notamment présent dans l’encodeur ffmpeg2theora (édité par v2v.cc), outil simple d’usage et qui tire le meilleur pour le format Theora. Développement faible, progrès faible.

x264 est un projet parallèle chapeauté par la fondation VideoLAN, est un encodeur extrêmement puissant et complet, très souvent utilisé. Développement soutenu, progrès faible.

Squeeze est un logiciel d’encodage multiformats qui arrive à de très bons résultats, tout particulièrement avec MPEG-4 AVC. Développement moyen, progrès moyen.

libvpx peut être utilisé en indépendant (vpxenc) ou couplé à la suite libre ffmpeg. Seul encodeur réellement fonctionnel pour le format VP8, il lui manque encore pas mal d’optimisations psychovisuelles et processeur, développement très soutenu, progrès rapide.

Intégration de streams WebM

En HTML, quand vous voulez intégrer une image, voici la syntaxe telle que recommandée par le W3C pour les normes HTML 4.01 et 5:

<img width="x" height="y" alt="z" src="./media/b5859615.image.png" data-original-source="http://wwz.suumitsu.eu/BT/image.png">

L’ordre des paramètres n’est pas important. L’intégration de streams WebM est similaire:

<video src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm"></video>

Ça c’est le code minimal. On va ajouter les contrôles (lecture/pause, volume,..) et un avertissement qui sera affiché si le navigateur ne sait pas traiter la balise <video> du HTML 5:

<video src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm" controls>Attention, votre navigateur ne sait pas traiter des vidéos HTML 5 !</video>

On va faire afficher la vidéo sur 250 pixels de largeur, et on va afficher une image tant que la vidéo n’est pas démarrée:

<video width="250px" poster="image.png" src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm" controls></video>

Démarrer automatiquement la lecture de la vidéo ?:

<video src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm" controls autoplay></video>

Intégrer à la fois du WebM et du MPEG-4 AVC:

<video controls>

<source src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm" type='video/webm; codecs="vp8, vorbis"'>

<source src="./media/a7b61bf8.video.mp4" data-original-source="http://wwz.suumitsu.eu/BT/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

</video>

Faire un fallback vers un stream Flash Megavideo:

<video controls>

<source src="./media/98662765.video.webm" data-original-source="http://wwz.suumitsu.eu/BT/video.webm" type="video/webm" onerror="fallback(this.parentNode)">

<object width="640" height="344">

<param name="movie" value="http://www.megavideo.com/v/poueeeeet"></param><param name="allowFullScreen" value="true"></param>

<embed src="http://www.megavideo.com/v/poueeeet" type="application/x-shockwave-flash" allowfullscreen="true" width="640" height="344"></embed></object>

</video>

<script type="text/javascript">function fallback(video) {

while (video.firstChild) {

if (video.firstChild instanceof HTMLSourceElement) {

video.removeChild(video.firstChild);

} else {

video.parentNode.insertBefore(video.firstChild, video);

}

}

video.parentNode.removeChild(video);

}

var video = document.getElementsByTagName('video')[0];

if (video.canPlayType) {

if (video.canPlayType("video/webm")) {

} else {

fallback(video);

}

}

</script>

Les développeurs en herbe pourront pousser plus loin en intégrant des événements javascript, des contrôles personnalisés, etc. Opera Software a publié un guide très complet :)

Vous pouvez bien sûr intégrer du code HTML 5 dans une page qui n’est pas entièrement en HTML 5 (par exemple sur Fansub Streaming, les streams sont intégrés en HTML 5 mais le reste de la page est en XHTML 1.0).

Sur Fansub Streaming, le code HTML 5 des streams HD est de ce type:

<video poster="http://www.fansub-streaming.eu/blog/wp-content/posterHD.svg" src="./media/30ffd132.stream" data-original-source="http://www.fansub-streaming.eu/stream/" controls></video>

Vous savez donc à présent comment intégrer des streams WebM sur votre site. Il ne vous reste plus qu’à savoir comment créer des streams WebM, et ça, ça sera le sujet d’un article ultérieur :)