Signatur
Beschreibung
Die Eigenschaft videoWidth gibt die intrinsische Breite der aktuell geladenen Videoressource zurück. Gemeint ist die Breite, die das Video von sich aus hat, also z. B. 1920 bei einem Full-HD-Video. Die per CSS oder über das Attribut width festgelegte Darstellungsgröße spielt keine Rolle. Das Seitenverhältnis der Pixel (Pixel Aspect Ratio) ist bereits eingerechnet, der Wert entspricht daher der tatsächlich angezeigten Breite in CSS-Pixeln.
Zusammen mit videoHeight nutzt man die Eigenschaft, um das Seitenverhältnis zu berechnen, einen <canvas> für Standbilder passend zu dimensionieren, Layouts ohne Verzerrung auszurichten oder die Auflösung eines Kamerastreams (getUserMedia) zu prüfen.
Der Wert steht erst bereit, wenn der readyState mindestens HAVE_METADATA (1) erreicht hat. Vorher ist er 0. Man liest ihn deshalb im Ereignis loadedmetadata aus. Ändert sich die Auflösung während der Wiedergabe, etwa bei adaptivem Streaming (HLS/DASH) oder bei einem Kamerastream, löst der Browser das Ereignis resize am Video-Element aus.
Rückgabewert
unsigned long) mit der intrinsischen Breite in CSS-Pixeln. Liefert 0, wenn noch keine Metadaten geladen sind, keine Quelle gesetzt ist oder die Ressource keine Videospur enthält.Beispiele
Auflösung nach dem Laden der Metadaten auslesen
const video = document.querySelector('video');
console.log('Vorher:', video.videoWidth); // meist 0
video.addEventListener('loadedmetadata', () => {
const { videoWidth: w, videoHeight: h } = video;
console.log(`Auflösung: ${w}×${h}`);
console.log(`Seitenverhältnis: ${(w / h).toFixed(3)}`);
});
video.src = 'film-1080p.mp4';Standbild in Originalauflösung auf einen Canvas zeichnen
const video = document.querySelector('#player');
const canvas = document.createElement('canvas');
const takeSnapshot = () => {
if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
throw new Error('Noch kein Bild verfügbar');
}
// Canvas an die intrinsische Größe anpassen, nicht an die CSS-Größ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 img = new Image();
img.src = takeSnapshot();
document.body.append(img);
});Kameraauflösung prüfen und auf Änderungen reagieren
const video = document.querySelector('video');
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: { ideal: 1280 }, height: { ideal: 720 } }
});
video.srcObject = stream;
const report = () =>
console.log(`Kamera liefert ${video.videoWidth}×${video.videoHeight}`);
video.addEventListener('loadedmetadata', report);
// z. B. beim Drehen eines Mobilgeräts oder Wechsel der Streaming-Qualität
video.addEventListener('resize', report);
await video.play();// Wichtig · Fallstricke
- Wert
0vorloadedmetadata: Der häufigste Fehler besteht darin,videoWidthdirekt nach dem Setzen vonsrczu lesen. Warten Sie aufloadedmetadataoder prüfen SiereadyState >= 1. - Nicht mit
widthverwechseln:video.widthspiegelt das HTML-Attribut wider,clientWidthbzw.getBoundingClientRect()die gerenderte Größe.videoWidthist davon unabhängig. - Schreibgeschützt: Eine Zuweisung wird stillschweigend ignoriert und löst im Strict Mode einen
TypeErroraus, weil es keinen Setter gibt. - Veränderlich: Bei adaptivem Streaming (MSE, HLS, DASH) und bei
MediaStream-Quellen kann sich der Wert während der Wiedergabe ändern. Werten Sie dafür das Ereignisresizeaus. - Rotation: Enthält die Datei Metadaten zur Drehung (z. B. Hochformat-Aufnahmen vom Smartphone), berücksichtigen moderne Browser sie in der Regel,
videoWidthundvideoHeightsind dann vertauscht. Ältere Browser verhalten sich hier uneinheitlich. - Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt. Das Ereignis
resizean Video-Elementen ist in aktuellen Browsern ebenfalls verfügbar.