Pour que nous puissions tous nous remémorer brièvement, voici un exemple de la façon dont on intègre traditionnellement des vidéos dans un site web :
<object classid="clsid:d27cdb6e-ae6-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>
Une telle syntaxe est tout sauf belle.
Mais même en laissant de côté le point de vue esthétique : la syntaxe est tout simplement trop sujette aux erreurs et trop complexe sous cette forme. Dans HTML5, il est beaucoup plus facile d'intégrer des vidéos. Pour cela, on utilise l'élément video.
Voici un exemple de la façon dont on peut intégrer cet élément video :
<video src="video.ogv" width="300" height="200"> Votre navigateur ne prend malheureusement pas en charge HTML5 </video>
C'est la manière la plus simple de le faire. Trois attributs sont cependant essentiels dans cette forme de syntaxe. Avec src, on spécifie la vidéo à intégrer. Assurez-vous de donner le bon chemin ici. Les deux attributs width et height définissent la largeur et la hauteur de la vidéo. Si aucune des deux valeurs n'est spécifiée, la vidéo sera affichée à sa taille d'origine. Si seule l'une des deux valeurs est spécifiée, l'autre valeur sera automatiquement calculée par le navigateur. L'attribut autoplay indique au navigateur de démarrer automatiquement la vidéo une fois la page chargée. En général, cet attribut ne devrait pas être défini car la lecture automatique n'est normalement pas souhaitée par les utilisateurs. Cela vaut d'autant plus pour les utilisateurs d'appareils mobiles à bande passante réduite.
Un autre attribut intéressant est controls. Lorsqu'il est utilisé, le navigateur affiche des éléments de contrôle natifs pour la lecture et le volume.
<video src="video.ogv" width="300" height="200" controls> Votre navigateur ne prend malheureusement pas en charge HTML5 </video>
Voici le résultat dans le navigateur :
Avec la barre affichée, vous pouvez non seulement mettre en pause et reprendre la vidéo, mais également contrôler le volume.
Vous pouvez spécifier une image via l'attribut poster qui sera affichée jusqu'au démarrage de la vidéo. Pour cela, utilisez l'attribut poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Votre navigateur ne prend malheureusement pas en charge HTML5 </video>
Assurez-vous également de spécifier correctement le chemin pour que l'image soit effectivement affichée.
Attention lors de l'utilisation de l'attribut autoplay. Car cet attribut spécifie que la vidéo doit être lue automatiquement une fois disponible.
<video src="video.ogv" width="300" height="200" autoplay> Votre navigateur ne prend malheureusement pas en charge HTML5 </video>
En ce qui concerne le trafic, l'attribut preload peut être intéressant. Cet attribut contrôle le comportement de préchargement. L'attribut peut prendre les valeurs suivantes :
• auto – Le navigateur peut précharger l'intégralité du fichier.
• none – Le fichier n'a pas besoin d'être préchargé.
• metadata – Le fichier peut être préchargé.
En l'absence de l'attribut de préchargement, les paramètres par défaut des navigateurs sont utilisés.
Vidéos et les codecs
Celui qui se penche sur l'intégration et la lecture de vidéos dans les sites web sera tôt ou tard confronté au problème des différents codecs. Grâce à ces codecs, les vidéos peuvent être efficacement compressées et décompressées. Le problème est que les fabricants de navigateurs n'ont toujours pas réussi à se mettre d'accord sur un format de codec commun. Pour HTML5 (et donc finalement pour vous aussi), cela signifie qu'il n'y a pas de codecs uniformes pour les vidéos et les fichiers audio.
Pour les vidéos, les formats Ogg et MP4 se sont désormais imposés. Par conséquent, vous êtes toujours du bon côté si vous proposez la vidéo dans ces deux formats. Pour cela, attribuez deux éléments source à l'élément vidéo.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Vous ne spécifiez donc pas la source vidéo à l'intérieur de l'élément video. Au lieu de cela, seules des informations générales sur l'affichage sont fournies. Le choix de la vidéo à afficher se fait via l'élément source. L'attribut src désigne la vidéo correspondante. Après type, on précise le type de vidéo ou le format dans lequel la vidéo est disponible.
Si plusieurs éléments source sont spécifiés, le navigateur lira toujours la première vidéo qui "correspond". La signification de ce "correspond" est expliquée ci-dessous.
Quel navigateur prend en charge quel format en réalité? La réponse à cette question est fournie dans le tableau suivant.
| Navigateur | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | À partir de la version 9 | |
| Mozilla Firefox | Oui | |
| Google Chrome | Oui | Oui |
| Opera | Oui | |
| Safari | Oui | |
| iPhone | Oui | |
| Android | Oui |
Le tableau met en évidence le dilemme : l'interprétation des formats est presque uniformément répartie sur les différents navigateurs. Par conséquent, il est presque obligatoire de fournir des vidéos dans les deux formats.
Grâce à l'attribut media, qui ne peut être assigné qu'à l'élément source, on peut spécifier explicitement le type de média pour lequel la vidéo est appropriée. Pour spécifier des vidéos spécifiquement pour certains appareils, l'attribut media doit être assigné à src. Cet attribut media indique le type de média souhaité.
Une utilisation possible de l'élément source pourrait ressembler à ce qui suit :
<video width="400" height="300">
<!-- Uniquement pour les appareils mobiles -->
<source src="video_mobile.ogg" media="handheld" />
<!—Tous les autres appareils -->
<source src="video_normal.ogg" media="all" />
</video>
Ainsi, en fonction de l'attribut media, on vérifie s'il s'agit d'un appareil mobile. Dans ce cas, une vidéo de taille plus petite est lue. Dans le cas d'un autre appareil, la valeur "all" est utilisée.
Intégrer des vidéos de manière sécurisée
HTML5 n'est pas encore largement supporté par tous les navigateurs. Cela vaut bien sûr aussi pour l'élément video. Une solution est d'utiliser une combinaison de différentes techniques d'intégration. Les éléments bien connus object et embed sont combinés avec video. Cela pourrait ressembler à ceci :
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <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/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Les vidéos intégrées de cette manière seront lisibles dans la plupart des navigateurs. Les navigateurs qui reconnaissent l'élément video l'utiliseront. Les autres navigateurs utiliseront en revanche les informations de l'élément object ou de l'élément embed.
