HTML5


La balise <video>

Actuellement, il y a principalement deux façons d'intégrer une vidéo sur un site web. La plus courante est d'utiliser un site tel que Youtube ou Dailymotion :

Exemple avec youtube :

Cette solution utilise une balise <object> ainsi que le plugin flash : 

<object width="425" height="264">
    <param name="movie" value="http://www.youtube.com/v/I2cV6tm16bs&hl=fr&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <embed src="http://www.youtube.com/v/I2cV6tm16bs&hl=fr&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01"
    type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="264">
    </embed>
</object>

On peut également insérer directement une vidéo au format QuickTime ou Windows Media dans une balise <embed> mais cela nécessite l'utilisation du plug-in vidéo correspondant pour le navigateur. C'est pourquoi aujourd'hui la seule solution qui pose le moins de problèmes de compatibilité repose sur un lecteur en flash (le plug-in flash étant installé sur l'immense majorité des navigateurs).

Cette solution a toutefois un inconvénient majeur : l'interface utilisateur (permettant de lire, mettre en pause, arrêter, chercher, et ajuster le volume) est figée dans le lecteur en flash, et imposée par le site hébergeant la vidéo. Parfois, on trouve des lecteurs en flash qui ne disposent pas de la barre permettant de se déplacer à un moment précis dans la vidéo, ce qui peut être très gênant...

Utilisation de la balise <video>

La solution proposée par html 5 consiste à intégrer directement une vidéo dans la page à l'aide de la balise <video> : 

<video controls autoplay poster="videos/poster.jpg">
    <source src="videos/slumdog_millionnaire_trailer.mov" type="video/quicktime" />
    <source src="videos/slumdog_millionnaire_trailer.ogg" type="video/ogg" />
</video>

Avantages par rapport à la balise <embed> ou <object>

Pour lire une vidéo incluse via les balises <embed> ou <object> il faut que les plugins correspondants soient installés sur le navigateur de l'internaute. Quicktime, Windows Media Player et VLC par exemple, installent leur plugins automatiquement pour les navigateurs principaux.

L'avantage de la balise <video> est de ne plus avoir besoin, en théorie, de ces plugins. En effet elle utilise soit les codecs gérés en natif dans le navigateur soit les capacités de DirectShow, Quicktime ou Gstreamer/Phonon (respectivement sous Windows, Mac et Linux).

Un autre avantage de la balise <video> est qu'elle apporte de la sémantique alors que les balises <embed> et <object> étaient vides de sens.

API

On dispose aussi d'une API très riche, permettant de créer sa propre interface utilisateur personnalisée. Cette API ouvre la voie à la création de scripts avancés et d'extensions Firefox pour personnaliser la lecture des vidéos sur le Web. Voici un exemple d'interface très simple que l'on peut coder en quelques lignes : 

<video id="video">
    <source src="videos/slumdog_millionnaire_trailer.ogg" type="video/ogg" />
</video>

<script>
    var video = document.getElementById("video");
</script>

<button type="button" onclick="video.play();">Lecture</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">&lt;&lt; Rembobiner</button>
<button type="button" onclick="video.currentTime = 60;">Aller &agrave; 1 min</button>

Note : La balise <video> est implémentée à partir de Firefox 3.1 actuellement en version beta.