<video>とonloadedmetadata-event

JavaScriptのHTML5動画要素のサイズを使用したいと思います。 videoタグ自体にはディメンションが設定されていないため、ビデオのサイズに合わせて拡大すると予想しています。私はちょうどビデオをロードすることが待機しませんように私は、300のデフォルト値を取得する要素のheight()および/またはwidth()を取得するためにjQueryを使用する場合<video>とonloadedmetadata-event

<video id="viddy" autoplay> 
<source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E"' /> 
</video>

：私のマークアップはこのようになります。ウェブで見つけたもの（hereとhere）は、私がonloadedmetadata -eventを待つべきだということです。だから、私はJSで次の操作を実行しようとしています：

var video = document.getElementById('viddy'); 
video.onloadedmetadata = function(e){ 
var dimensions = [video.videoWidth, video.videoHeight]; 
alert(dimensions); 
}

しかし、イベントは決して火（ビデオの読み込みと再生されますが）になり、私は私の寸法を得ることは決してないだろう。同じことがjQuery-bind('load',と私が考えることのできる方法で起こります。何か案が？ありがとう。

出典

2012-01-24 m90

あなたのhtml頭の終わりにfunctionにあなたのコードを入れて（例えば「のinit」と呼ばれる）とDOMContentLoaded -eventにバインド：

<head> 
    ... 
    <script type="text/javascript"> 
    function init() { 
     var video = document.getElementById('viddy'); 
     video.onloadedmetadata = function(e){ 
      var dimensions = [video.videoWidth, video.videoHeight]; 
      alert(dimensions); 
     } 
    } 
    document.addEventListener("DOMContentLoaded", init, false); 
    </script> 
</head>

はまた、このexampleを参照してください。

=== === UPDATE

Chromeのあなたがするリスナーを追加変更する必要があります。

video.addEventListener('loadedmetadata', function(e){

はまた、この updated exampleを参照してください。 jQueryを使って

=== === UPDATE

：

$(document).ready(function() { 
    $('#viddy').on('loadedmetadata', function() { 
     var dimensions = [this.videoWidth, this.videoHeight]; 
     alert(dimensions); 
    }); 
});

また、このupdated exampleを参照してください。

出典

2012-01-24 09:06:42 scessor

興味深い。私は '$（document）.ready（）'でJSを呼び出しましたが、それは起動しませんでした。違いはどこですか？とにかく、ありがとう！ – m90

だから、ある種のタイプミスをしているに違いない。それは '$（document）.ready（）'と一緒に働いている。 – m90

なぜChromeは 'video.onloadedmetadata'の代わりに' addEventListener（） 'を必要としますか？ – Gili

<video>とonloadedmetadata-event

答えて

関連する問題