HTML5 : les nouveaux attributs vidéo au crible Les attributs HTML5 @loop et @poster

@loop


L'attribut @loop permet de faire automatiquement redémarrer la vidéo une fois la lecture terminée. Il provoque la lecture en boucle de la ressource vidéo.

Listing 2.7 : Vidéo WebM avec les attributs @autoplay et @loop

<video src="HelloWorld.webm" autoplay loop></video>


L'attribut @loop est aussi un attribut booléen. Vous ne pouvez donc pas spécifier le nombre de boucles, ni même indiquer s'il faut ou non réaliser la lecture en boucle. Si vous souhaitez n'exécuter qu'un nombre défini de boucles, vous devez utiliser l'API JavaScript. Nous verrons comment utiliser les fonctions appropriées au Chapitre 4. Lorsque l'attribut est spécifié en conjonction avec @autoplay, la vidéo se lance automatiquement et continue de se lire en boucle jusqu'à ce que l'utilisateur ou une commande de script l'arrête ou la mette sur pause.

Tous les navigateurs, à l'exception de Firefox, prennent en charge cet attribut.

@poster


Dans les captures d'écran de la Figure 2.3, vous remarquerez que la première image de la vidéo est utilisée comme image représentative de la vidéo. La plupart des navigateurs récupèrent la première image car les données qui lui correspondent arrivent juste après les en-têtes dans la ressource vidéo et sont donc faciles à télécharger. Mais il n'existe pas de garantie à ce sujet. En outre, si la première image est noire, ce n'est sans doute pas la meilleure à présenter.

L'utilisateur peut donc fournir une image explicite en guise "d'affiche" ou de
"poster". Le poster est également une image représentative de la vidéo. Les vidéos dont la lecture n'a pas encore commencé sont remplacées par le poster. En général, il s'agit d'une image extraite de la vidéo et représentative de son contenu. On peut cependant utiliser n'importe quelle image. Certains sites web choisissent même des images GIF animées afin d'afficher en boucle une succession d'images représentatives
de la vidéo. C'est également possible avec l'élément <video> en HTML5.

figure 2.5 - l'image poster utilisée dans les prochains exemples.
Figure 2.5 - L'image poster utilisée dans les prochains exemples. © Pearson
L'attribut @poster de l'élément <video> fournit un lien vers une ressource d'image que le navigateur peut afficher lorsque les données vidéo ne sont pas encore disponibles. Cette image s'affiche pendant que la vidéo se charge dans le navigateur. Le poster utilisé ici est présenté dans la Figure 2.5.

Le Listing 2.8 montre comment elle est utilisée dans un élément <video>.

Listing 2.8 : Vidéo Ogg avec l'attribut @poster

 <video src="HelloWorld.ogv" poster="HelloWorld.png"></video>


La Figure 2.6 montre à quoi ressemble le résultat dans différents navigateurs avec les ressources vidéo appropriées.


figure 2.6 -  un élément avec les attributs @src et @poster dans firefox,
Figure 2.6 -  Un élément avec les attributs @src et @poster dans Firefox, Safari, Opera, Chrome et Internet Explorer (de gauche à droite). © Pearson
Vous remarquerez qu'un bogue se produit dans la version testée d'Opera avec l'affichage de l'image de poster. Rien ne s'affiche. Le bogue a été réparé depuis et ne doit plus apparaître dans les prochaines versions. Il est néanmoins toujours possible de lancer la lecture automatique de la vidéo (soit à l'aide du code JavaScript, soit en activant le menu contextuel). Nous considérerons ces options ultérieurement. Firefox et Chrome affichent le poster au lieu de la vidéo et la mettent sur pause lorsque l'attribut @poster est spécifié sans l'attribut @autoplay.

Le comportement de Safari et d'Internet Explorer est moins intéressant. Safari affiche le poster pendant qu'il configure le pipeline de décodage, mais dès qu'il a terminé, il affiche la première image de la vidéo. Internet Explorer fait de même mais il en profite aussi, entre l'affichage du poster et celui de la première image, pour afficher une image noire.

Les organismes de normalisation s'efforceront très certainement d'harmoniser ces comportements divergents. Pour l'instant, liberté est donnée aux navigateurs, et les deux comportements sont considérés comme valides.

Si @poster est spécifié en conjonction avec @autoplay, l'image @poster n'apparaît que brièvement pendant que les métadonnées de la ressource vidéo sont chargées et avant que la lecture vidéo ne commence. Il est donc recommandé de ne pas utiliser @poster en conjonction avec @autoplay.
Précédent
Suivant