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

ただし、setTimeout は使用したくありません。正確に計算されたスタイル値を取得する「適切な」方法はありますか?

4

2 に答える 2

1

イベントloadedmetadataの後、またはreadyState プロパティが 1 以上の場合、正しいvideoHeight/videoWidthを取得できます。

jQuery を使用して正しい値を取得するコードは、次のようになります。

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

ただし、すべてのブラウザがすぐにビデオの取得を開始するわけではないことに注意してください。

于 2011-07-26T11:03:16.977 に答える
0

ビデオ要素の固有の幅と高さを取得する場合は、 と を取得する必要がありvideoWidthますvideoHeight。このドキュメントを参照してください

于 2011-07-26T03:41:04.443 に答える