video要素で読み込んだ動画の情報を取得する

video要素で読み込んだ動画の長さをJavaScriptで取得しようとして少し詰まったので、実装方法をメモしておきます。

サンプルコード

動画の幅、高さ、長さを取得してみます。

HTML

<div id="video-area"></div>

JavaScript

// videoの埋め込み
var video = document.createElement('video');
document.getElementById('video-area').appendChild(video);

// 動画のメタデータ読み込み後
video.addEventListener('loadedmetadata', function() {
	console.group('metadata読み込み後');
	console.log('幅:', video.videoWidth); // 640
	console.log('高さ:', video.videoHeight); // 360
	console.log('長さ:', video.duration); // 12.074376
	console.groupEnd();
});

// 動画読み込み
video.src = 'movie.mp4';
video.load();

console.group('load直後');
console.log('幅:', video.videoWidth); // 0
console.log('高さ:', video.videoHeight); // 0
console.log('長さ:', video.duration); // NaN
console.groupEnd();

動画情報取得のデモページ
最初はload()実行後に取得しようとしていたのですが、loadedmetadataイベントを使ってメタデータ読み込み後でないと取得できないようでした。
　

【参考サイト】

• JavaScriptプログラミング講座【ビデオについて（HTMLVideoElement）】