HTML5 : les nouveaux attributs vidéo au crible L'attribut HTML5 @controls

Il est temps maintenant de présenter l'un des attributs les plus utiles de l'élément <video> : l'attribut @controls. Si vous souhaitez incorporer une vidéo et lui associer des contrôles par défaut pour l'interaction avec l'utilisateur, c'est l'attribut qu'il vous faut.

L'attribut @controls est un attribut booléen. S'il est spécifié sans @autoplay, les contrôles sont selon les cas toujours affichés (Safari et Chrome), affichés lorsque vous survolez la vidéo ou quittez la zone de survol de la vidéo (Firefox) ou uniquement affichés lorsque vous survolez la vidéo (Opera et Internet Explorer).

Le Listing 2.11 présente un exemple d'utilisation de @controls avec une vidéo Ogg. La Figure 2.9 montre le résultat dans les navigateurs pour une largeur de vidéo fixée à 300 pixels.


Listing 2.11 : Vidéo Ogg avec l'attribut @controls

<video src="HelloWorld.ogv" controls></video>

 Vous remarquerez qu'Internet Explorer propose deux contrôles différents : l'un est un simple bouton de bascule pour la lecture/pause et l'autre un affichage en recouvrement par-dessus la vidéo, comparable à ceux des autres navigateurs. Le bouton simple est très utile lorsque la vidéo devient petite et commence à moins de 372 pixels de largeur pour l'exemple donné.

figure 2.9 - un élément avec @controls dans firefox, safari et opera (ligne du
Figure 2.9 - Un élément avec @controls dans Firefox, Safari et Opera (ligne du haut), puis Chrome et Internet Explorer à 300 pixels de largeur et enfin Internet Explorer à 400 pixels de largeur (ligne du bas). © Pearson