La vidéo avec HTML 5

La balise video affiche une vidéo à partir d'un fichier conteneur qui peut aussi inclure le son. Elle est doté d'attributs permettant d'en définir le fonctionnement et l'apparence.

Conteneur

Les fichiers conteneurs ont un format qui doit être reconnu par les logiciels, en l'occurence le navigateur.

Les types de conteneur suivants peuvent être utilisés:

MPEG 4 avec l'extension .mp4.
Ogg avec l'extension .ogg.
AVI avec l'extension .avi.
Flash video avec l'extension .flv.

Codecs

Le codec est l'algorithme de COmpression et DECompression de la vidéo (ou COdage et DECodage).

La spécification HTML 5 ne prévoit pas de codec vidéo précis faute d'accord sur la technologie à utiliser. Mais les navigateurs reconnaissent plusieurs codecs:

MPEG 4 est un standard avec des implémentations diverses. Parmi celles-ci, Xvid est open source mais cela n'empêche pas l'existence de brevets sur le codec.
H.264 est une version de MPEG 4 pour les appareils limités et fournit une haute compression pour une qualité réduite. Il est utilisé par Youtube pour la HD et par Blu-Ray.
Mozilla refuse de payer une licence de 5 millions de dollars par an pour ce format dans lequel Apple et Microsoft sont impliqués.
Theora est un codec libre et dispose d'un codec open source. Il est généralement placé dans un conteneur ogg.
Il ne supporte pas l'accélération matérielle comme le fait H.264 de MPEG.LA.

Balise et attributs

La balise video est reconnue par Firefox, Chrome, Safari et IE avec le plugin Google Chrome Frame.

video

<video src="fichier" width="600" height="400" />

ou avec la balise source définie dans HTML 5 également:

<video><source src="fichier"></video>

Un panel de contrôle personnalisé peut être ajouté avec un calque:

<div class="video">
    <video></video>
    <div class="panel"></div>
</div>

Le webmaster definit l'apparence de la barre de contrôle en HTML, CSS et JavaScript.

src

L'URL du conteneur de la vidéo.

width, height

Les dimensions de l'image affichée.

poster

L'URL d'une image à afficher en remplacement de la vidéo, en attendant qu'elle soit disponible. On utilise une frame de la vidéo.

videoHigh, videoHeight

Ce sont les dimensions originelles de l'image. Des attributs en lecture seule qui sont lus en JavaScript, pour informer l'utilisateur.

autobuffer

Vaut vrai ou faux, la valeur vrai déclenche le chargement en mémoire de la vidéo en même temps que la page, une option quand on suppose qu'elle sera obligatoirement vue.

autoplay

Vaut vrai ou faux, la valeur vrai démarre la vidéo quand la page est chargée.

loop

Vaut vrai ou faux, la valeur vrai fait tourner la vidéo en boucle.

controls

Vaut vrai ou faux, la valeur vrai indique que la barre de contrôle par défaut s'affiche, sinon le site définit sa propre barre.

Ajouter la compatibilité

Le balise <video> devient compatible avec tout navigateur grâce au code fourni par html5media. Vous pouvez télécharger ces scripts sous licence MIT pour ne pas dépendre d'un site extérieur.
Dans le principe, les scripts passent sous lecteur Flash si le navigateur ne supporte pas HTML 5.

Mais la balise video peut elle même inclure un lecteur Flash de remplacement: sur les anciens navigateurs, elle est ignorée, seul le lecteur Flash est pris en compte. Exemple fourni par Mozilla (modifié):

<video controls>
<source src="mavidéo.ogg" type="video/ogg"/>
<source src="mavidéo.mp4" type="video/mp4"/>
<object src="http://blip.tv/play/AYGLzBmU8hw"
  type="application/x-shockwave-flash"
  width="500" height="396"
  allowscriptaccess="always"
  allowfullscreen="true"/>
</video>

Voir aussi

Le codec ogg. Les outils utiles et les extensions pour utiliser le format dans un navigateur.

Outils

Flarevideo. Player open source basé sur la balise video. On peut changer le thème.
Video.js. Code JavaScript pour personnaliser le lecteur basé sur la balise video.
HTML5video. Code JavaScript qui ajoute la reconnaissance de la balise <video> aux navigateur qui ne l'ont pas (comme IE8).

Références et plus

HTML 5 video. Par le W3C.
Brief history of video compression.
Sublime video reader. Fonctionne avec Chrome 4. Montre un avantage sur Flash, on peut aller immédiatement à n'importe quelle partie de la vidéo.