HTML5 : les nouveaux attributs vidéo au crible Les attributs HTML5 @width, @height

Comment les navigateurs décident-ils des dimensions auxquelles afficher la vidéo ? Dans les précédentes captures d'écran, vous aurez remarqué que la vidéo est affichée avec une largeur et une hauteur données selon une mise à l'échelle qui respecte les proportions d'origine de la vidéo (le rapport entre largeur et hauteur). Dans les captures d'écran de la Figure 2.3, les navigateurs affichent les vidéos dans leurs dimensions natives, autrement dit celles dans lesquelles elles ont été encodées. Les dimensions sont calculées à partir de la première image de la ressource vidéo. Dans cet exemple, il s'agit d'une résolution 960 pixels sur 540.

Dans les captures d'écran de la Figure 2.2, les navigateurs se sont vu attribuer une image poster pour l'affichage initial, qui était en l'occurrence de 960 pixels sur 546, soit 6 pixels de plus en hauteur que la vidéo elle-même. Au moment de la lecture, la fenêtre d'affichage de la vidéo est mise à l'échelle pour correspondre aux dimensions vidéo définies dans la première image.

Si aucune dimension d'image poster ou d'image vidéo n'est disponible (par exemple, en raison d'erreurs de chargement ou de l'absence de l'attribut @poster), la zone d'affichage de la vidéo (aussi appelée "fenêtre d'affichage") est de 300 pixels sur 150 (affichage minimal) ou équivalente à sa taille intrinsèque.

Comme vous pouvez le voir, un grand nombre de mises à l'échelle différentes se produisent. On peut constater un ralentissement des performances du navigateur et l'affichage peut s'interrompre quand la fenêtre d'affichage est brusquement redimensionnée pour passer de la taille de l'image poster à celle de la vidéo. Il est donc préférable de contrôler les opérations de mise à l'échelle en définissant explicitement
les attributs @width et @height de l'élément <video>. Pour de meilleures
performances, utilisez en outre les dimensions natives de la vidéo.

L'image poster est mise à l'échelle aux dimensions données dans @width et @height, et la vidéo qui apparaît dans la fenêtre d'affichage voit ses proportions respectées et elle peut être centrée au format portrait ou paysage, en fonction des dimensions. Les attributs @width et @height n'ont pas pour fonction de permettre d'étirer la taille de la vidéo, mais plutôt de la réduire et de l'aligner. La valeur de @width et de @height correspond à un entier long non signé, qui est interprété comme des pixels CSS.

Tous les navigateurs tolèrent également que la valeur de @width ou de @height soit spécifiée avec le suffixe "px" (par exemple, "300px") même si, à strictement parler, il s'agit d'une notation invalide. Tous les navigateurs, à l'exception d'Internet Explorer, tolèrent également que les valeurs soient spécifiées avec le suffixe "%" et mettent à l'échelle la vidéo en respectant ce pourcentage relativement aux dimensions natives de la vidéo. Cette notation n'est pourtant pas valide non plus. Si vous souhaitez opérer des mises à l'échelle relatives de ce type, utilisez des CSS (voir Chapitre 3). Le Listing 2.9 présente un exemple avec ces dimensions.


Listing 2.9 : Vidéo WebM avec des dimensions @width et @height fi xes

<video src="HelloWorld.webm" poster="HelloWorld.png" width="320" height="180"></
video>

<video src="HelloWorld.webm" poster="HelloWorld.png" width="25%" height="25%"></
video>


La Figure 2.7 montre à quoi ressemble cet exemple dans différents navigateurs, chacun utilisant le format de fichier approprié. Vous remarquerez que Firefox redimensionne les deux de la même manière (à
savoir, il utilise également les dimensions de la vidéo pour la mise à l'échelle du poster), très certainement afin d'éviter l'agaçant tremblotement produit par le redimensionnement de la vidéo au démarrage de la lecture. Safari et Chrome redimensionnent la vidéo en fonction de la hauteur du poster. Internet Explorer ne prend pas en charge le redimensionnement relatif mais interprète la valeur de pourcentage comme s'il s'agissait de pixels CSS. Opera contient un bogue introduit avec l'utilisation de l'attribut @poster : la vidéo mise à l'échelle par une valeur de pourcentage refuse complètement de s'afficher (les dimensions de la vidéo invisible sont
de 253 pixels sur 548). La vidéo mise à l'échelle de manière explicite, quant à elle, s'affiche normalement. L'attribution d'une valeur @width et @height explicite en pixels est donc un moyen évident de résoudre le bogue poster d'Opera.

figure 2.7 - un élément avec les attributs @width et @height dans firefox et
Figure 2.7 - Un élément avec les attributs @width et @height dans Firefox et Safari (en haut), Opera (à droite), Chrome et Internet Explorer (en bas). © Pearson