On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :
<video width="400" height="222" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>
Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.
controls="controls" (et pas juste
controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs
(autoplay, etc.).
Attributs
L'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis.
L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que
l'utilisateur lira la vidéo. Attention, cette option est à manier avec prudence (il est préférable que ce soit la seule raison d'être de la page). Note : il s'agit de l'ancien attribut
autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.
L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à
faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet.
L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que
la lecture de celle-ci ne soit lancée.
L'attribut loop indique que la lecture doit s'effectuer en boucle.
Voici un premier exemple, notez que je mets la version mp4 en premier afin d'être sûr que les iPhone, iPad et autres iPod pourront la lire (ils lisent uniquement la version mp4, et il faut que cette dernière soit proposée en premier pour que cela fonctionne).
<video width="400" height="222" controls="controls">
<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" />
<source src="animations/Cavernae_Terragen2.webm" type="video/webm" />
<source src="animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" />
Vous n'avez pas de navigateur moderne, donc pas de balise video HTML5 !
</video>
L'idée de cet exemple est de permettre au plus grand nombre de navigateurs modernes de pouvoir visualiser la vidéo, je propose donc les trois formats (MP4, WebM, et Ogg). Par
contre, mon alternative pour les navigateurs ne supportant pas la balise video est un peu sèche dans l'exemple ci-dessus. :)
Comme l'idée est de proposer la vidéo au plus grand nombre, je vais insérer en version alternative une version flash de cette même vidéo, ainsi, Internet Explorer pourra quand même la lire.
Pour cet exemple, j'ai choisi d'insérer le player YouTube de cette vidéo.
<video width="400" height="222" controls="controls">
<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" />
<source src="animations/Cavernae_Terragen2.webm" type="video/webm" />
<source src="animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw">
<param name="movie" value="http://www.youtube.com/v/HVMoJqg41Bw" />
<param name="wmode" value="transparent" />
Vous n'avez pas de navigateur moderne, ni Flash installé...
</object>
</video>
