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:
- VP8 de Google. Open source, il est équivalent en qualité à H.264.
- 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 mais supporte ce format par l'intermédiaire de CISCO. - VP9, successeur de VP8 est supporté par tous les navigateurs.
Nouveaux codecs:
- H.265 or HEVC était un successeur possible à H.264, mais les complexités juridiques le rendent inutilisable en masse.
- Theora est un codec libre et open source. Il ne supporte pas l'accélération matérielle comme le fait H.264.
- Opus. Codec totalement libre et gratuit défini pour remplacer H.264.
- Dalaa. Codec défini par Xiph avec le concours de Mozilla pour être supérieur à H.265 et donc nettement plus efficace que H.264. Il n'est pas standard mais a servi de base pour AV1.
- AV1 est le dernier codec en date, libre de brevets. Il divise la taille d'un fichier par 2 par rapport à H.264, mais l'encodage prend 9200 fois plus de temps. Même si on arrive à l'accélerer cent fois, il restera encore 90 fois plus lent et d'une utilisation restreinte.
Les types de conteneur de fichier vidéos suivants peuvent être utilisés:
- WebM pour les codec VP8 et VP9.
- MPEG 4 avec l'extension .mp4.
- Ogg avec l'extension .ogg, pour Theora.
- AVI avec l'extension .avi.
- Matroska avec l'extension .mkv. Conteneur standard et libre pour tous codecs.
- Les codecs de la balise video.
Ogg, WebM, H.264, outils utiles pour les utiliser, notamment dans un navigateur.
Outils
- Video.js. Code JavaScript pour personnaliser le lecteur basé sur la balise video.
- HTML5media. Code JavaScript qui ajoute la reconnaissance de la balise <video> aux navigateurs qui ne l'ont pas (comme IE8).
- Seriously. Vous vous demandez comment les cinéastes font pour transposer des personnages sur des décors fantastiques. C'est la technique du fond vert, vous pouvez l'utiliser vous même en HTML 5 et avec Node.js et ce code.
Références et plus
- HTML 5 video. Specification par le W3C.
- Brief history of video compression. Décrit l'évolution des techniques dans le domaine de la compression vidéo. (Anglais).
- Etats de la vidéo. Support de la vidéo par les navigateurs en janvier 2012.