====== Streams: formats et intégration ======
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 =====

  * OGG
    *    Liste numérotéeTheora
    *    Vorbis
    *    Pas de royalties
  * MP4
    *    MPEG-4 AVC "H.264"
    *    AAC
    *    Royalties
  * WEBM
    *   VP8
    *   Vorbis
    *    Pas de royalties

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.

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:

<code html><img width="x" height="y" alt="z" src="image.png"></code>

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

<code html><video src="video.webm"></video></code>

Ç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:

<code html><video src="video.webm" controls>Attention, votre navigateur ne sait pas traiter des vidéos HTML 5 !</video></code>

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:

<code html><video width="250px" poster="image.png" src="video.webm" controls></video></code>

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

<code html><video src="video.webm" controls autoplay></video></code>

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

<code html><video controls>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video></code>

Faire un fallback vers un stream Flash Megavideo:

<code html><video controls>
<source src="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></code>

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 [[http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/|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:

<code html><video poster="http://www.fansub-streaming.eu/blog/wp-content/posterHD.svg" src="http://www.fansub-streaming.eu/stream/?v=/amv/VIDOK-Resistance.webm" controls></video></code>

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 :)