Konsole, die verschiedene Video-Client Breite

Question

einen Blick auf diese:

https://jsfiddle.net/udr2m3xn/1/

Dies ist die HTML

<video> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
</video> 

Dies ist die JS

var video = document.querySelector('video'); 
var vw = video.clientWidth; 

console.log('Client width: ' + vw); 
console.dir(video); 

Das Video 320x176 ist px. Die Variable vw gibt jedoch 300 aus (es sollte 320 sein). Aber wenn Sie die Video-Eigenschaften prüfen können Sie sehen, dass es sagt, dass der Client Breite 320.

Ist das ein Debug oder ich etwas fehlt? Danke im Voraus!

Answer 1

Sie für die Videos Metadaten warten soll, bevor Sie versuchen zu ladende Variablen zuzugreifen, ist das loadedmetadata Ereignis mit deter (was bedeutet, dass die gleichen/verschiedenen Eingängen der Ausgang doesn gegeben‘ t zeigen unterschiedliche Verhaltensweisen), während setTimeout ist nicht deterministisch.

video.addEventListener("loadedmetadata", function() { 
    console.log(video.clientWidth) 
}, true) 

Ich würde vorschlagen, die vollständige Liste der events Check-out, wie es vielleicht andere, die Sie nützlich finden werden!

Answer 2

300 ist die Standardbreite des Elements. Der JS wird ausgeführt, bevor das Video geladen werden kann, und legt die richtige Breite des Elements fest. Wenn Sie Ihre JS in setTimeout() verpacken, sehen Sie die richtige Breite. Sehen Sie es live erleben:

https://jsfiddle.net/udr2m3xn/3/