HTMLVideoElement.videoHeight — Eigenschaft · JavaScript-Referenz

Signatur

HTMLVideoElement.videoHeight

Beschreibung

videoHeight gibt die natürliche (intrinsische) Höhe der Videoquelle zurück, also die Höhe, in der das Video kodiert ist. Die Anzeigegröße des <video>-Elements (gesetzt über CSS oder das height-Attribut) hat darauf keinen Einfluss. Zusammen mit videoWidth lässt sich so das Seitenverhältnis des Materials bestimmen.

Der Wert ist erst verfügbar, wenn der Browser die Metadaten geladen hat, also ab readyState >= HAVE_METADATA (1). Vorher liefert die Eigenschaft 0. Am sichersten liest man sie deshalb im loadedmetadata-Event aus. Wechselt die Auflösung während der Wiedergabe, etwa bei adaptivem Streaming (HLS/DASH) oder bei einem WebRTC-Stream, feuert das Element ein resize-Event und videoHeight enthält danach den neuen Wert.

Typische Einsatzzwecke sind:

ein <canvas> passend zum Video dimensionieren, etwa für Screenshots oder Frame-Verarbeitung,
Layouts mit dem richtigen Seitenverhältnis berechnen,
die Auflösung eines Kamera-Streams aus getUserMedia() ermitteln.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der intrinsischen Höhe in CSS-Pixeln. 0, wenn noch keine Metadaten geladen sind, ein Fehler aufgetreten ist oder die Quelle keine Videospur enthält.

Beispiele

Auflösung nach dem Laden der Metadaten auslesen

const video = document.querySelector('video');

console.log(video.videoHeight); // vor dem Laden meist 0

video.addEventListener('loadedmetadata', () => {
  const { videoWidth, videoHeight } = video;
  const ratio = (videoWidth / videoHeight).toFixed(3);
  console.log(`Auflösung: ${videoWidth}×${videoHeight}, Seitenverhältnis ${ratio}`);
});

video.src = 'film-1080p.mp4';

0 Auflösung: 1920×1080, Seitenverhältnis 1.778

Screenshot in voller Auflösung per Canvas

const video = document.querySelector('video');

const takeSnapshot = () => {
  if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return null;
  const canvas = document.createElement('canvas');
  // Canvas auf die intrinsische Größe setzen, nicht auf die Anzeigegröße
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  return canvas.toDataURL('image/png');
};

document.querySelector('#snap').addEventListener('click', () => {
  const dataUrl = takeSnapshot();
  if (dataUrl) document.querySelector('#preview').src = dataUrl;
});

Kamera-Auflösung ermitteln und auf Änderungen reagieren

const video = document.querySelector('video');

const start = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { height: { ideal: 720 } }
  });
  video.srcObject = stream;
  await video.play();
  console.log(`Kamera liefert ${video.videoWidth}×${video.videoHeight}`);
};

// Wird ausgelöst, wenn sich die intrinsische Größe ändert
video.addEventListener('resize', () => {
  console.log('Neue Höhe:', video.videoHeight);
});

start().catch(console.error);

Kamera liefert 1280×720 Neue Höhe: 720

// Wichtig · Fallstricke

Häufigster Fehler: Wer den Wert direkt nach dem Setzen von src liest, bekommt 0. Auf loadedmetadata warten oder readyState prüfen. Beim Teilen durch videoHeight immer auf 0 prüfen, sonst entsteht Infinity oder NaN.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert und wirft im Strict Mode einen TypeError. Die Anzeigegröße ändert man über CSS oder das Attribut height.
videoHeight ist nicht dasselbe wie clientHeight oder offsetHeight: Diese liefern die gerenderte Größe des Elements.
Bei Videos mit Rotations-Metadaten (z. B. Hochkant-Aufnahmen vom Smartphone) berücksichtigen moderne Browser die Drehung. Ältere Implementierungen konnten Breite und Höhe vertauscht liefern.
Bei adaptivem Streaming kann sich der Wert während der Wiedergabe ändern. Deshalb auf das resize-Event reagieren.
Kompatibilität: wird von allen modernen Browsern seit Langem unterstützt (Baseline).

Siehe auch

HTMLVideoElement.videoWidth HTMLVideoElement HTMLMediaElement.readyState CanvasRenderingContext2D.drawImage() HTMLTableRowElement.vAlign