Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Utiliser la balise HTML5 video

Par dcz.switcher (dcz.switcher), le 23 mai 2013

L’objectif de cet article est de vous montrer comment utiliser la balise HTML5 video.

Il est important de noter que la balise video n'est pas prise en charge par les anciens navigateurs parmi lesquels internet explorer 8 qui, à ce jour, est encore répandu.

Prérequis Disposer de n’importe quel navigateur dans une version récente à jour (internet explorer en version 9 minimum)

Avoir déjà créé une page au format .html

Introduction lapidaire

Nouveauté remarquée de l’évolution du HTML dans sa version 5, la balise vidéo permet, comme son nom l’indique, d’intégrer une vidéo dans votre page et ce sans le recours à un plugin comme Flash, Quicktime, Windows Media Player…

Son utilisation est en outre très simple et on peut lui appliquer différents styles avec les CSS

La balise

La syntaxe est très simple:

<video width=”700” height=”380” controls=”controls” poster=”video_poster.jpg”>
    Ce qui est écrit ici ne s’affiche que si le navigateur ne connait pas cette balise
</video>

On remarque les attributs controls et poster qui permettent respectivement d’afficher les controles pour la lecture et de déterminer l’image affichée en attendant que la vidéo soit lancée.

Il existe plusieurs autres attributs comme loop pour la lecture en boucle et autostart pour le lancement automatique de la vidéo

Quel format pour ma vidéo ?

Avant de voir comment on indique quelle vidéo lancer, il est nécessaire de savoir dans quel format elle devra être encodée.

Actuellement les deux formats qui permettent la meilleure adoption sont mpg4/h.264 et webm caniuse.com

Pour encoder la vidéo dans ces deux formats, vous pouvez utiliser le logiciel Miro Video Converter qui est gratuit et multi-plateforme

miro video converter

conseil : évitez d’utiliser la miniature créée automatiquement par Miro, elle pèse souvent lourd.

Une fois votre vidéo encodée dans les deux formats attendus, il suffit d’ajouter une balise source par format à l’intérieur de la balise video

<video width=”700” height=”380” controls=”controls” poster=”video_poster.jpg”>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
</video>

Une dernière chose

Chez certains hébergeurs, il sera nécessaire d’indiquer au serveur comment traiter les différents types de fichiers vidéos en ajoutant ces derniers dans un fichier .htaccess à la racine de votre site.

note : en principe le mp4 fonctionne sans, c’est moins sûr pour le webm.

AddType video/mp4 .mp4
AddType video/webm .webm

Conclusion

Vous savez maintenant comment intégrer une vidéo sur votre site.

Il est important d’avoir à l’esprit que les anciens navigateurs ne savent pas utiliser cette nouvelle balise, en particulier internet explorer 8 qui équipe les postes windows XP.

Mais vous pouvez très bien utiliser ce bon vieux flash pour afficher la vidéo pour ces visiteurs en intégrant ce dernier à l’intérieur de la balise video.