HTMLVideoElement : propriété videoHeight
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété en lecture seule videoHeight de l'interface HTMLVideoElement indique la hauteur intrinsèque de la vidéo, exprimée en pixels CSS.
En termes simples, il s'agit de la hauteur du média à sa taille naturelle.
Valeur
Un entier qui définit la hauteur intrinsèque de la vidéo en pixels CSS.
Si la propriété readyState de l'élément vaut HTMLMediaElement.HAVE_NOTHING, alors la valeur de cette propriété est 0, car aucune information de taille n'est encore disponible pour la vidéo ou l'image d'affiche.
À propos de la largeur et de la hauteur intrinsèques
Un agent utilisateur calcule la largeur et la hauteur intrinsèques du média de l'élément en partant de la largeur et de la hauteur brutes en pixels, puis en tenant compte de plusieurs facteurs :
- Le rapport d'affichage du média.
- L'ouverture propre du média (le sous-rectangle centré dans le média qui correspond au rapport d'affichage cible).
- La résolution de l'appareil cible.
- Tout autre facteur requis par le format du média.
Si l'élément affiche actuellement l'image d'affiche au lieu de la vidéo rendue, la taille intrinsèque de l'image d'affiche est considérée comme étant la taille de l'élément <video>.
Si à tout moment la taille intrinsèque du média change et que la propriété readyState de l'élément n'est pas HAVE_NOTHING, un évènement resize sera envoyé à l'élément <video>.
Ceci peut se produire lorsque l'élément passe de l'affichage de l'image d'affiche à l'affichage du contenu vidéo, ou lorsque la piste vidéo affichée change.
Exemples
Cet exemple crée un gestionnaire pour l'évènement resize qui redimensionne l'élément HTML <video> pour correspondre à la taille intrinsèque de son contenu.
let v = document.getElementById("myVideo");
v.addEventListener("resize", (ev) => {
let w = v.videoWidth;
let h = v.videoHeight;
if (w && h) {
v.style.width = w;
v.style.height = h;
}
});
Notez que ce changement n'est appliqué que si videoWidth et videoHeight sont tous deux non nuls.
Ceci évite d'appliquer des modifications invalides lorsqu'aucune information réelle n'est encore disponible pour les dimensions.
Spécifications
| Specification |
|---|
| HTML # dom-video-videoheight-dev |