Как надежно и последовательно получить расчетный стиль ширины для элемента 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, Смотрите эту документацию