読者です 読者をやめる 読者になる 読者になる

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

<video>タグの高さを取得する場合は「loadedmetadata」イベントが発火してから実行する

f:id:kokushin:20160408103917p:plain

<video> タグの高さを取りたいのだけれど、正確な数値が取れない時がある...という時は、loadedmetadata イベントが発火してから取得すると正確に高さを取ることが可能です。

var $video = $('video');

$video.on('loadedmetadata', function() {
  // videoの高さを取得
  console.log($video.height());
});

原因

<video> 内の動画が全て読み込まれていない状態だと高さが正常に取得できないようです。
最初は load でページ読み込み後に取得しようとしていたのですが、うまく取得できませんでした。

困ったときはお試しください。