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"です。 100ミリ秒の遅延でそのconsole.logコールでsetTimeoutを使用すると、正しい "640px"値がコンソールに表示されます。

私はむしろsetTimeoutを使用したくありません。正確な計算されたスタイル値を得るための「適切な」方法はありますか？

Answer 1

は、イベントloadedmetadataの後、またはreadyState property is higher or equal 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が必要です。これを参照してくださいdocumentation