Как мне надежно и последовательно получить расчетный стиль ширины для элемента VIDEO?

Question

var vid = document.createElement("video");
vid.src = "big_buck_bunny_640x360.mp4";
document.getElementsByTagName("body")[0].appendChild(vid);
console.log(window.getComputedStyle(vid, null).getPropertyValue("width"));

Консоль неизменно показывает «300px», но, очевидно, я ищу значение «640px». Если я использую setTimeout для этого вызова console.log с задержкой в ​​100 миллисекунд, в консоли отобразится правильное значение «640px».

Я бы предпочел не использовать setTimeout. Есть ли «правильный» способ получить точное рассчитанное значение стиля?

Answer 1

Вы можете получить правильное значение videoHeight / videoWidth после события загруженных метаданных или, если свойство readyState больше или равно 1 .

Код для получения правильного значения - используя jQuery - может выглядеть следующим образом:

$('<video />')
    .appendTo('body')
    .one('loadedmetadata', function(){
        console.log( $.prop( this, 'videoHeight'), $.prop( this, 'videoWidth') );
    })
    .prop({
        'src': 'big_buck_bunny_640x360.mp4',
        'preload': 'metadata'
    })
;

Но учтите, что не все браузеры сразу начинают загружать видео.

Answer 2

Если вы хотите получить собственную ширину и высоту элемента видео, вы должны получить videoWidth и videoHeight.Смотрите эту документацию