video要素の動画の長さ(duration)の取得がうまくいかない場合の解決方法

video要素に指定された動画の長さ(duration)の取得でハマったので解決策をメモしておきます。

結論からいうと、「setInterval」を使って、durationを取得できるようになるまで待機(ループ)させることで解決しました。

var timer = setInterval(function() {
	if( video.readyState > 0 ) {
		video.duration;
		clearInterval(timer);
	}
}, 300);

このコードにたどり着くまでに、予め用意されていたvideoがらみのイベントハンドラを一通り試しましたが、どれもdurationの取得がうまくいかなかったんですよね。loadedmetadataやloaddataなんていかにもソレっぽいのですが、どれを試してもうまく取得できたりできなかったり、NaNになったりと不安定でした。

同じ症状でお悩みの方は、お試しになってみてください。

ページの先頭へ