Lihatlah ini:

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

Ini HTMLnya

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

Ini JSnya

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

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

Video berukuran 320x176 piksel. Namun, variabel vw menghasilkan 300 (seharusnya 320). Tetapi ketika Anda memeriksa properti video, Anda dapat melihat bahwa lebar klien adalah 320.

Chrome dev tools

Apakah ini debug atau saya melewatkan sesuatu? Terima kasih sebelumnya!

0
nick 29 Agustus 2017, 21:57

2 jawaban

Jawaban Terbaik

Anda harus menunggu metadata video dimuat sebelum mencoba mengakses variabel, menggunakan loadedmetadata peristiwa adalah deterministik (artinya dengan input yang sama/berbeda, output tidak menunjukkan perilaku yang berbeda ) sedangkan setTimeout adalah non-deterministik.

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

Sebaiknya periksa daftar lengkap acara karena mungkin ada orang lain yang menurut Anda berguna!

2
Nijikokun 29 Agustus 2017, 20:22

300 adalah lebar default elemen <video>. JS dieksekusi sebelum video memiliki waktu untuk memuat, dan mengatur lebar elemen yang tepat. Jika Anda membungkus JS Anda dalam setTimeout(), Anda akan melihat lebar yang benar. Lihat langsung:

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

0
matthewninja 29 Agustus 2017, 19:24