Le tag video dans HTML 5

La nouvelle révision du langage HTML apporte sont lot de nouvelles balises (voir le Wiki pour une liste exhaustive). Une de celles qui a fait couler le plus d'encre est la fonction permettant d'intégrer nativement des lecteurs vidéos dans les pages: <video>. Nous allons dans ce billet nous focaliser sur cette nouvelle balise et en détailler les options.

Introduction

Pour qu'un navigateur Web soit capable de lire directement une vidéo (c'est à dire un flux vidéo et audio), il faut qu'il possède les librairies de décodages (codecs) de ces flux. Dans sa grande sagesse, le W3C (l'organisme qui spécifie le langage HTML) avait décidé de normaliser ces codecs en choisissant les formats libres Theroa et Vorbis. Après un lobbying très actif d'Apple et de Nokia, le W3C a supprimer de ces spécifications le fait d'imposer un codec vidéo et audio commun. En clair on peut très bien se retrouver avec un Firefox qui permettra de lire des vidéos au format Theroa/Vorbis et un Safari qui décodera les vidéos au format H.264... A l'heure actuelle, le navigateur Firefox est capable (dans sa version 3.5) de lire des vidéos utilisant le codec vidéo Theora et le format audio Vorbis. Bien lui en a pris... Nous allons donc utiliser ce Navigateur pour nos tests.

Hébergement des vidéos

Si vous souhaitez intégrer des vidéos dans votre site Web, la première chose à prendre en compte est l'hébergement des fichiers sources. En effet ces fichiers peuvent être volumineux et en cas de consultation simultanées le débit peut devenir très important. A moins de disposer d'une infrastructure d'hébergement professionnelle, je ne vous conseille pas d'héberger les fichiers vidéos sources sur votre serveur Web. De nombreux sites permettent un hébergement gratuit d'œuvres libres de droits. J'ai choisi Wikimedia pour héberger la vidéo qui va illustrer mes exemples. Si vous souhaitez tout de même héberger vos vidéos sur votre serveur Web Apache, il faut vérifier que les type mime suivant sont pris en compte dans la configuration (fichier de configuration ou fichier .htaccess):

AddType video/ogg .ogv AddType application/ogg .ogg

Exemples d'utilisation de la balise <video>

Affichage d'une vidéo

Nous allons dans ce premier exemple afficher sur une page Web une vidéo stocké sur le serveur Wikimedia à l'adresse suivante: http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg La vidéo va être téléchargé (ce n'est donc pas du streaming). Quand le navigateur estimera que le téléchargement est assez avancé, il commencera à jouer la vidéo. Pour lancer la vidéo, il faut faire un click droit / Play. On utilise le code suivant:

<video src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg"></video>

Voir l'exemple 01 en action.

Affichage d'une vidéo avec ses contrôleurs

On va améliorer l'exemple précédant en ajoutant des contrôleurs (Play/Pause, barre de progession et volume). On utilise pour cela le tag controls: Voici le code:

<video src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg" controls></video>

Voir l'exemple 02 en action.

Redimensionnement de la vidéo

L'intégration de la vidéo dans le design de votre site Web nécessitera surement une redimensionnement de celle-ci. Attention, ce n'est pas parce-que la vidéo est plus petite que le temps de chargement va être plus cours. En effet, c'est la même source qui est utilisée. Voici le code:

<video src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg" width="427" height="240" controls></video>

Voir l'exemple 03 en action.

Forcer la lecture de la vidéo

Une autre fonction intéressant est le fait de pouvoir forcer la lecture de la vidéo (sans aucune intervention de votre visiteur). On utilise le tag autoplay. Voici le code:

<video src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg" width="427" height="240" controls autoplay></video>

Voir l'exemple 04 en action.

Ajouter des contrôleurs en JavaScript

C'est bien beau d'avoir les contrôleurs disponible sur la vidéo mais pour une intégration aux petits oignons dans votre site, il peut être utile de déporter ces fonctions sur des liens/boutons externes. Pour cela, la balise vidéo permet de fixer un tag id. Ce dernier pourra être utilisé dans un JavaScript:

 <script>
                function play() {
			video = document.getElementById("myvideo");
			video.play();
		}
		function pause() {
			video = document.getElementById("myvideo");
			video.pause();
		}
</script>
...
<video id="myvideo" src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg" width="427" height="240" controls></video>

Voir l'exemple 05 en action.