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

À présent, examinons tous les attributs de contenu de l'élément <video> afin de comprendre exactement ce que l'élément <video> peut offrir.

Pour enclencher la lecture automatique de la vidéo, il suffit d'ajouter un attribut @autoplay. Sans l'attribut @autoplay, le navigateur ne télécharge au début de la ressource vidéo que la quantité d'octets nécessaire pour vérifier s'il peut décoder le format et l'en-tête, afin de pouvoir préparer le pipeline de décodage pour les données audio et vidéo. Ces données d'en-tête sont également appelées ?métadonnées?. Ce terme prend de nombreuses acceptions dans le domaine de la vidéo, aussi assurez-vous de bien comprendre à quoi il fait référence dans ce contexte.

Lorsque l'attribut @autoplay est spécifié, la vidéo requiert automatiquement
d'autres données audio et vidéo après avoir configuré le pipeline de décodage, les place en mémoire tampon et lit la vidéo lorsque la quantité de données téléchargées et décodées semble suffisante au navigateur pour lire la vidéo jusqu'au bout, avec le débit de mise en tampon estimé et sans devoir s'interrompre pour effectuer un nouveau placement préventif en mémoire tampon. Le Listing 2.6 présente un exemple d'utilisation de l'attribut @autoplay.

Listing 2.6 : Vidéo Ogg avec l'attribut @autoplay

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


L'attribut @autoplay est un attribut dit "booléen", parce qu'il ne prend aucune valeur spécifique. Sa simple présence signifie qu'il possède la valeur true. Son absence signifie qu'il possède la valeur false. Toute valeur fournie pour l'attribut est donc ignorée : si vous spécifiez @autoplay="false", vous faites en réalité exactement l'inverse, car vous signifiez que la lecture automatique est activée.

Lorsque l'attribut @autoplay est fourni, la vidéo commence à se lire. Si aucune interaction de l'utilisateur ou d'un script ne l'interrompt, elle avance du début jusqu'à la fin et s'arrête une fois la lecture terminée. Si la vitesse de téléchargement des données vidéo n'est pas assez rapide pour une lecture fluide ou si la vitesse de décodage du navigateur est trop lente, la lecture vidéo s'interrompt et la mémoire tampon se recharge avant la reprise. Le navigateur signale à l'utilisateur la temporisation (en affichant un sablier ou un message "Chargement en cours?").

La Figure 2.4 présente les navigateurs à différents stades de la lecture de l'exemple HelloWorld : Internet Explorer et Safari avec le fichier MPEG-4 et Firefox, Opera et Chrome avec le fichier WebM. À la fin de la lecture, la vidéo s'arrête sur la dernière image, en attente de données vidéo supplémentaires dans l'éventualité où il s'agirait d'un flux continu en direct.

figure 2.4 - exemples d'états de lecture automatique dans cinq navigateurs. de
Figure 2.4 - Exemples d'états de lecture automatique dans cinq navigateurs. De gauche à droite : Firefox, Safari, Chrome, Opera et Internet Explorer. © Pearson

HTML / Javascript