La balise video

La balise <video > est une toute nouvelle addition au HTML5 et vous permet, vous le devinerez, de visionner un film sur votre site Web. Les données reliées à cette balise sont normalement des vidéos, mais peuvent aussi inclure des images ou des données sonores.

Pour l’instant, cette balise ne sera fonctionnelle que sur les dernières versions des navigateurs, soit Safari 3.1 et plus, Firefox 3.5 et plus, Opera 10 et plus et bien sûr Google Chrome.

La vieille façon

Regardez ce bout de code horrible :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Affreux. Et comme vous le savez sûrement, vous aurez besoin du plugiciel Flash pour exécuter le tout. Dans plusieurs cas, le code sera généré par du javascript. C’est loin d’être idéal.

La façon HTML5

Du code propre et minimal :

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Essayez cette page avec Safari 4 ! Ou vous pouvez  <a  href="http://www.youtube.com/demo/google_main.mp4">télécharger le vidéo</a> à la place.</p>
</video>

Autoplay

La balise <video> possède un attribut qui vous permet d’activer le vidéo dès que la page est téléchargée.

<video src="abc.mov" autoplay>
</video>

Toutefois, est-ce que autoplay est une mauvaise pratique ? Les sites du type de Youtube commencent à faire jouer leurs vidéos dès que la page est téléchargée. Vous devriez toutefois bien peser le pour et le contre d’une telle pratique, car elle peut fortement incommoder des utilisateurs.

Téléchargement

Si le navigateur ne reconnaît pas la balise video, ou s’il y a une erreur d’affichage, vous pouvez offrir à l’utilisateur de télécharger le film.

Autobuffer

L’attribut autobuffer est utilisé lorsque autoplay ne l’est pas et lorsque l’auteur de la page pense que la vidéo sera regardée après le téléchargement. Avec cet attribut activé, le téléchargement du film se fera en arrière-plan. Lorsque l’utilisateur la regardera, celui-ci sera en partie téléchargé, et une bonne partie du vidéo pourra être visionné sans attente. Si les attributs autoplay et autobuffer sont tous les deux spécifiés, autobuffer sera ignoré.

Il est important de noter que présentement les navigateurs téléchargent automatiquement les vidéos, avec ou sans autobuffer et qu’on ne peut pas changer ce comportement. Ceci a un impact sur la bande passante utilisée par votre site Web, particulièrement si vous avez plusieurs vidéos sur une même page.

Poster

L’attribut poster sert à afficher une image du vidéo (en format jpg, png ou autre) si le vidéo ne se charge pas pour une raison ou une autre. Cette image peut être locale au serveur accédé ou peut provenir d’ailleurs sur le Web.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Essayez cette page avec Safari 4 ou vous pouvez <a href="http://www.youtube.com/demo/google_main.mp4">téléchargez le vidéo</a>.</p>
</video>

Vous devriez utiliser l’attribut poster pour s’assurer que l’internaute ne tombe pas sur une page blanche.

Controls

En ajoutant cet attribut, vous pourrez fournir vous même les boutons de commande (Jouer, Pause, etc.) pour votre vidéo. Par exemple, Safari possède des boutons de base très bien, mais vous pourrez créer les vôtres pour personnaliser votre site Web.

Sous-titres

Il n’y a malheureusement pas encore d’attributs pour les sous-titres. Il y a beaucoup de discussions à ce sujet dans le groupe HTML5. Il existe un moyen d’ajouter des sous-titres avec du javascript. Idéalement, nous ne devrions pas avoir besoin de script pour y arriver.

Problématiques

Codecs

Je ne suis pas un expert en codecs vidéo et audio, mais il subsiste encore quelques problèmes à ce sujet.

Internet Explorer

Internet Explorer ne supporte pas présentement la balise <video> et nous devrons trouver une solution à ce problème important. Heureusement, les docteurs HTML5 ont quelques astuces qui seront présentées dans un articles bientôt ! (Mise à jour : Internet Explorer 9 semble supporter la balise. C’est une très bonne nouvelle.)

Fichier physique

Jusqu’à maintenant, la balise <video> doit inclure un lien vers un fichier physique (comme dans l’exemple au début de l’article). Ce que nous avons souvent besoin est d’importer un vidéo d’un autre site, comme Youtube, et ce, de la même manière que nous le faisons actuellement avec les balises <object> et <embed>.

Quand j’ai commencé à écrire cet article, je voulais vous faire rigoler avec une vidéo de Rick Asley comme si nous étions en 2008, mais je n’ai pas encore trouvé le moyen de le faire avec une balise <video>.

Voici ce que je pense que nous devrions pouvoir faire avec une balise <video> :

<video src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" autoplay>
</video>

Ce serait génial non ?

En conclusion

Nous sommes encore loin de pouvoir utiliser intégralement la balise video, mais celle-ci a vraiment beaucoup de potentiel. La problématique des codecs est réelle et risque de durer longtemps, mais vous pourrez toujours utiliser le lien vers la vidéo en mode alternatif. Vous pouvez aussi utiliser une combinaison des balise video, object et embed. Toutefois, ce code est plutôt horrible à maintenir :

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

En attendant

Si vous ne voulez pas utiliser tout de suite la balise <video>, vous pouvez toujours utiliser du code XHTML valide pour afficher une vidéo :

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Pour en savoir plus :

Liens en français :

À venir



3 commentaires pour “ La balise video ”

Commentaire par PlugicielPowa le

Et comme vous le savez sûrement, vous aurez besoin du plugiciel Flash pour exécuter le tout. Dans plusieurs cas, le code sera généré par du javascript. C’est loin d’être idéal.

Non sérieusement plugiciel ….. ça existe vraiment ce mot ?

Commentaire par id meneo le

Bon allez c’est dit, je m’y mets. Je reviendrai donc ici.
J’arrive pas à faire fonctionner la balise video pour l’instant (dois-je modifier mon entête de page pour que le HTML5 soit interprété?), mais « object » marche bien. Reste le problème des différents navigateurs mais bon.

nb: il manque un « l » à courriel dans ton formulaire de commentaire 😉

Laisser un commentaire

Vous pouvez utiliser ce balises : <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <del datetime=""> <em> <i> <q cite=""> <strong>

Vous pouvez aussi utiliser <code>, mais n'oubliez pas d'utiliser &lt; and &gt; pour les balises.