Ajax JavaScript CSS HTML 5 Firefox

La vidéo avec HTML 5

La balise video affiche une vidéo à partir d'un fichier conteneur, qui peut aussi inclure le son. C'est un élément très développé avec des attributs pour définir le ode de fonctionnement et l'apparence.

Mais actuellement elle ne permet pas le plein écran et n'offre donc pas toutes les possibilités du lecteur Flash.

Balise et attributs

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

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

Ou avec la balise source:

<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 peut définir l'apparence de la barre de contrôle avec une feuille de style et controler le déroulement avec JavaScript.

src
L'URL du conteneur de la vidéo.
width, height
Les dimensions de l'image.
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 fournir une information sur la vidéo.
autobuffer
Vaut true ou false, la valeur vrai déclenche le chargement en mémoire de la vidéo en même temps que la page, une option choisie quand on suppose qu'elle sera obligatoirement vue.
autoplay
Vaut true ou false, la valeur vrai démarre la vidéo quand la page est chargée.
loop
Vaut true ou false, la valeur vrai fait tourner la vidéo en boucle.
controls
Vaut true ou false, la valeur vrai indique que la barre de contrôle par défaut s'affiche, sinon le site définit sa propre barre.

Assurer la compatibilité

La page doit passer sous lecteur Flash si le navigateur ne supporte pas HTML 5.

Pour ce faire on peut placer le code du lecteur Flash dans le contenu de la balise: ce code est ignoré sur les navigateur récents, on contraire sur les plus anciens, ce sont les balises ouvrantes <video> et fermante </video> qui sont ignorées. De même que la balise <source>.
Exemple:

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

Le balise <video> peut aussi devenir compatible avec tout navigateur grâce au code fourni par html5media.
Vous pouvez télécharger ces scripts, sous licence MIT, et les placer sur votre site pour ne pas dépendre d'un site extérieur.

Codecs et fichier conteneur

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:

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

Outils

Références et plus

© 2008-2013 Xul.fr