Une des grandes nouveautés avec HTML5 est la possibilité d’intégrer de la vidéo sans passer par la technologie Flash. En effet, encore aujourd’hui sous HTML4 ou XHTML, nous devons “embedder” (oui oui le verbe embedder) nos vidéos en Flash. Cela implique donc beaucoup de code inutile et souvent pas conforme au W3C. De plus, il faut également s’assurer que l’utilisateur possède Flash Player pour être en mesure de jouer la vidéo en question. Vous me direz : “Oui, mais qui n’a pas Flash Player de nos jours?”… Admettons que mon grand-père ne l’a pas et que je veux lui faire plaisir, je vais utiliser HTML5 et la balise <video>.
Voici un exemple de l’utilisation de la vidéo avec HTML5 :
<video width=”450″ height=”400″ poster=”images/bla.jpeg” controls=”controls”>
<source src=”http://tinyvid.tv/vfe/big_buck_bunny.ogv” type=”video/ogg” />
</video>
Simple n’est-ce pas? En ayant moindrement des connaissances en HTML, vous devriez être en mesure de comprendre le fonctionnement général de cette ligne de code. Je vais par contre vous expliquez l’essentiel plus en profondeur ci-dessous.
La balise peut comprendre 8 attributs (voir mon billet “Bien démarrer avec HTML5” pour y consulter la HTML5 Cheat Sheet).
Vous connaissez sans aucun doute les attributs width, height et src qui sont également utilisés pour les images. Ce qui nous intéresse est plutôt l’attribut poster, control, autoplay(qui n’est pas dans l’exemple) ainsi que la balise <video>.
L’attribut poster permet de choisir une image qui apparaîtra si la vidéo prend du temps avant de charger ou si la vidéo n’existe plus. Dans mon exemple, mon image par défaut est placée sous le répertoire images.
L’attribut controls indique au navigateur que vous voulez les contrôles par défaut. Il est également possible de créer ses propres contrôles, mais j’y reviendrai dans un autre billet.
L’attribut autoplay s’assure de jouer automatiquement la vidéo (ce que je ne suggère en aucun cas sur un site Web à moins que ce soit vraiment pertinent..).
La balise <source> me sert à déterminer l’emplacement de la vidéo ainsi que son format.
Vous pouvez donc maintenant facilement intégrer vos vidéos dans vos pages en utilisant HTML5. Bien entendu, HTML5 n’est pas encore totalement au point et la balise <video> n’est pas encore supportée par tous les navigateurs . Firefox 3.5, Chrome 3 Beta, Safari 4 et iPhone OS3 supportent assez bien la balise <video>. Est-ce que cette nouvelle méthode va remplacer l’utilisation de Flash pour insérer de la vidéo dans nos pages? Seul le temps nous le dira. Une chose est sûre, il est intéressant d’avoir une alternative à Flash.
Voici également un exemple intéressant de l’utilisation de la vidéo en HTML5. Si votre navigateur ne supporte pas HTML5, la vidéo sera lue par Flash.
http://camendesign.com/code/video_for_everybody/test.html
Quel développeur web n’a pas grandement entendu parlé d’HTML5 au cours des derniers mois ou dernières semaines? Ayant moi-même été inondé de contenu dans mon Twitter, j’ai également suivi la vague et j’ai commencé à m’y intéresser de plus en plus.