HTML5 : la balise <video>



Une des grandes nouveautés de HTML5 est la balise video

Syntaxe

L'élément <video>, proche cousin de l'élément <audio> offre en HTML5 une solution simple, pour intégrer une vidéo dans une page web.

<video controls src="video.mp4">Ici la description alternative</video>
L'attribut src définit l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Il est préférable d'indiquer les dimensions avec les attributs height et width, et si tout va bien, la vidéo devrait s'afficher dans le navigateur... si celui-ci supporte le format de vidéo indiqué dans la source.

<video controls src="video.mp4" width="520" height="390">Ici la description alternative</video>
Sources multiples

Comme rien n'est simple, il existe trois formats de vidéo reconnu par les différents navigateurs :
MP4 pour Safari 5+ et Internet Explorer 9+
Ogg pour Firefox 3.5+, Opera 10.5+ et Google Chrome 4+
WebM Firefox 4+, Opera 10.6+ et Goggle Chrome 6+

On peut alors proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :

<video width="400" height="222" 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>
La version mp4 doit toujours être placée en premier dans la liste pour permettre aux iPad, iPhones et iPod de la lire.
Attributs

L'attribut controls donne accès aux contrôles de lecture, 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 s'agit de l'ancien attribut autobuffer.

L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement.

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.

<video width="400" height="222" controls autoplay loop poster="image.jpg">
<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>
Ajout de Flash pour les navigateurs ne reconnaissant pas la balise <video>

Si vous désirez que tous les navigateurs puissent lire votre vidéo on ajoute le code permettant de faire jouer votre vidéo par un lecteur flash.
N'oubliez pas d'intégrer un lecteur flash à votre site.

<video width="520" height="390" controls poster="image.jpg">
	<source src="video.mp4" type="video/mp4"></source>
	<source src="video.webm" type="video/webm"></source>
   <source src="video.ogv" type="video/ogg"></source>
	<!-- Flash: -->
	<object width="480" height="296" type="application/x-shockwave-flash" data="flvplayer.swf">
    <!-- Firefox utilise l'attribut 'data', IE/Safari utilisent 'param' -->
    <param name="movie" value="flvplayer.swf" />
    <param name="flashvars" value="flvplayer.swf?autostart=false&amp;image=image.jpg&amp;file=video.mp4" />
	</object>
</video>

Le plus sur est aussi d'ajouter un lien direct vers votre film afin que l'utilisateur puisse le télécharger.


<p>Download Video: <a href="video.mp4">Apple iTunes "MP4"</a> | <a href="video.ogv">Open Format "OGG"</a></p>
Le sous élément <track>

Ce tag peut s'utiliser avec le tag <audio> et le tag <video>

Les différents attributs du Tag <track> :
default
Cet attribut précise que cette piste doit être activée. un seul attribut de ce type peut être utilisé.
kind
Le type de donnée doit être spécifiée à l'aide de l'attribut kind, celui ci peut prendre les valeurs suivantes :
subtitles, captions, descriptions, chapters ou metadata.
La valeur par défaut est subtitles
label
titre du fichier
src
adresse du fichier
srclang
la langue au format BCP 47

<video src="sample.mp4">
<track kind="captions" src="sampleCaptions.srt" srclang="en"> 
<track kind="descriptions" src="sampleDesciptions.srt" srclang="en"> 
<track kind="chapters" src="sampleChapters.srt" srclang="en"> 
<track kind="subtitles" src="sampleSubtitles_fr.srt" srclang="fr"> 
<track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en"> 
<track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1"> 
</video>

l'élément <track> est actuellement très peu supporté par les navigateurs, il vous faudra créer ou utiliser des bibliothèques javascript existantes pour l'utiliser.
Top