HTML5動画の再生時間（duration）が取得できない問題の解決方法

HTML5動画の再生時間が取得できない原因

HTML5の<video>要素から動画の再生時間（duration）を取得しようとしても、意図した値が取得できないことがあります。この問題の主な原因は、動画のメタデータがまだ読み込まれていない段階でdurationプロパティにアクセスしていることにあります。

readyState属性で読み込み状態を確認する

動画の読み込み状態を確認するには、readyState属性を参照します。この属性は0から4までの値を持ち、それぞれ次の状態を表します。

• 0（HAVE_NOTHING）：情報が何も読み込まれていない状態
• 1（HAVE_METADATA）：メタデータ（再生時間など）の読み込みが完了した状態
• 2（HAVE_CURRENT_DATA）：現在の再生位置のデータが利用可能な状態
• 3（HAVE_FUTURE_DATA）：現在位置以降のデータも利用可能な状態
• 4（HAVE_ENOUGH_DATA）：十分なデータが読み込まれ、スムーズに再生できる状態

メタデータが読み込まれた時点で、readyStateの値は「1」になります。つまり、readyStateが1以上であれば、動画の再生時間を正しく取得できる状態です。

setIntervalを使った実装例

以下のように、setIntervalで定期的にreadyStateをチェックし、メタデータが読み込まれたタイミングで再生時間を取得する方法が有効です。

setInterval(function(tm) {
    // readyState属性を確認
    if (video.readyState > 0) {
        var duration = $('#duration').get(0);
        // 動画の再生時間を取得（四捨五入）
        var video_duration = Math.round(video.duration);
        duration.firstChild.nodeValue = video_duration;
        clearInterval(tm);
    }
}, 1000);

このコードでは、1秒ごとにreadyStateを確認し、値が0より大きくなった時点（メタデータの読み込み完了）で動画の再生時間を四捨五入して表示し、インターバルを解除しています。

よりモダンな代替手段：loadedmetadataイベント

なお、近年ではsetIntervalによるポーリングではなく、loadedmetadataイベントを使用する方法が推奨されています。

video.addEventListener('loadedmetadata', function() {
    var duration = Math.round(video.duration);
    document.querySelector('#duration').textContent = duration;
});

イベントベースの実装は、メタデータの読み込みが完了した瞬間に正確に処理を実行でき、不要なポーリングを避けられるため、パフォーマンス面でも優れています。状況に応じて適切な方法を選択してください。