HTMLVideoElement: videoHeight Eigenschaft

Wert

Ein ganzzahliger Wert, der die intrinsische Höhe des Videos in CSS-Pixeln angibt. Wenn der readyState des Elements HTMLMediaElement.HAVE_NOTHING ist, ist der Wert dieser Eigenschaft 0, da noch keine Informationen über die Größe des Videos oder des Posterbildes verfügbar sind.

Über intrinsische Breite und Höhe

Ein Benutzeragent berechnet die intrinsische Breite und Höhe des Medienelements, indem er mit der Roh-Pixel-Breite und -Höhe des Mediums beginnt und dann Faktoren wie berücksichtigt:

• Das Seitenverhältnis des Mediums.
• Die saubere Öffnung des Mediums (das zentrierte Rechteck innerhalb des Mediums, das dem Ziel-Seitenverhältnis entspricht).
• Die Auflösung des Zielgeräts.
• Andere für das Medienformat erforderliche Faktoren.

Wenn das Element derzeit das Posterbild anzeigt, anstatt gerendertes Video, wird die intrinsische Größe des Posterbildes als die Größe des <video> Elements betrachtet.

Wenn sich die intrinsische Größe des Mediums zu irgendeinem Zeitpunkt ändert und der readyState des Elements nicht HAVE_NOTHING ist, wird ein resize Ereignis an das <video> Element gesendet. Dies kann passieren, wenn das Element vom Anzeigen des Posterbildes zum Anzeigen von Videoinhalten wechselt oder wenn der angezeigte Videodatenstrom wechselt.

Beispiele

Dieses Beispiel erstellt einen Handler für das resize Ereignis, der das <video> Element an die intrinsische Größe seiner Inhalte anpasst.

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;
  }
});

Beachten Sie, dass dies die Änderung nur anwendet, wenn sowohl videoWidth als auch videoHeight ungleich null sind. Dies vermeidet das Anwenden ungültiger Änderungen, wenn noch keine echten Informationen über die Abmessungen verfügbar sind.

Spezifikationen

Browser-Kompatibilität