Baseline Widely available
Die schreibgeschützte videoHeight-Eigenschaft der HTMLVideoElement-Schnittstelle gibt die intrinsische Höhe des Videos an, ausgedrückt in CSS-Pixeln. Einfach gesagt, dies ist die Höhe des Mediums in seiner natürlichen GröÃe.
Ein ganzzahliger Wert, der die intrinsische Höhe des Videos in CSS-Pixeln angibt. Wenn der readyState des Elements HTMLMediaElement.HAVE_NOTHING ist, dann ist der Wert dieser Eigenschaft 0, da weder Video- noch PosterrahmengröÃe-Informationen verfügbar sind.
Ein User Agent berechnet die intrinsische Breite und Höhe der Medienelemente, indem er mit der Rohpixelbreite und -höhe des Mediums beginnt und dann Faktoren wie berücksichtigt:
Wenn das Element derzeit den Posterrahmen anzeigt und nicht das gerenderte Video, wird die intrinsische GröÃe des Posterrahmens als die GröÃe des <video>-Elements betrachtet.
Wenn sich zu irgendeinem Zeitpunkt die intrinsische GröÃe des Mediums ä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 Posterrahmens zum Anzeigen von Videoinhalten wechselt oder wenn der angezeigte Videotrack wechselt.
Dieses Beispiel erstellt einen Handler für das resize-Ereignis, der das <video>-Element so anpasst, dass es die intrinsische GröÃe seiner Inhalte entspricht.
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;
}
},
false,
);
Beachten Sie, dass dies nur die Ãnderung anwendet, wenn sowohl videoWidth als auch videoHeight ungleich null sind. Dies verhindert das Anwenden ungültiger Ãnderungen, wenn noch keine echten Informationen zu den Abmessungen verfügbar sind.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4