[html] javascriptにてvideoタグのデータ読み込み時の注意点

mayatasomayataso

videoタグのwidthやheightは、動画のメタデータがすべて読み込まれるまでは取得できない。

$(function() {
   var video = $(video).get(0);
   console.log('video.videoWidth');
   // ↑この場合、videoデータのwidthが1920でも0が出力される
});

これらのメタデータを得るためには、メタデータ読み込み完了まで待つ必要がある。

// loadedmetadataイベント発火まで待つ処理
$(video).on('loadedmetadata ', function() {
   var video = $(video).get(0);
   console.log('video.videoWidth');
});