HTML5で長時間動画の特定部分のバッファリング範囲を取得する方法

TimeRangesオブジェクトとは

HTML5のvideo要素やaudio要素では、TimeRangesオブジェクトを使用することで、メディアのバッファリング（読み込み済み）状態を表す、互いに重複しない一連の時間範囲を扱えます。各範囲には開始時刻と終了時刻が設定されており、長時間の動画でもどの部分がバッファ済みかを正確に把握できます。シークバーに読み込み状況を表示したい場合などに特に役立ちます。

TimeRangesオブジェクトの主なプロパティとメソッド

• length − バッファリングされた時間範囲の数
• start(index) − 指定したインデックスの範囲の開始時刻（秒単位）
• end(index) − 指定したインデックスの範囲の終了時刻（秒単位）

バッファリング範囲を取得するコード例

以下のコードは、bufferedプロパティを使って、2番目のバッファ範囲（インデックス1）の開始時刻と終了時刻を取得する例です。

// 開始時刻「12」を表示
myAudio.buffered.start(1);

// 終了時刻「20」を表示
myAudio.buffered.end(1);

この例では、12秒から20秒までの区間がバッファリングされていることを示しています。ブラウザによっては複数の範囲が存在する場合があるため、lengthプロパティで範囲の総数を確認し、ループ処理ですべての範囲を走査するのが一般的です。

なお、video要素の場合も audio 要素と同様に video.buffered でアクセスできます。シークバーにバッファ状況を可視化したい場合は、start() と end() の値をもとにバーの位置や幅を計算すると、直感的なUIを実装しやすくなります。