HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Videoのbufferedプロパティとは？使い方をサンプルコード付きで解説

HTML DOM Video bufferedプロパティとは

HTML DOMのVideo要素におけるbufferedプロパティは、動画のバッファ済み（読み込み済み）範囲に関する情報を含むTimeRangesオブジェクトを返します。このオブジェクトには、バッファされた範囲の長さや、その開始位置・終了位置が格納されています。

このプロパティを活用することで、JavaScriptから動画がどこまで読み込み完了しているかを取得でき、独自のプログレスバーやバッファ状況の表示などを実装する際に非常に役立ちます。

構文

bufferedプロパティの構文は以下のとおりです。

TimeRangesオブジェクトを返す場合：

mediaObject.buffered

戻り値であるTimeRangesオブジェクトには、start(index)メソッドやend(index)メソッドを使ってアクセスし、指定したインデックスのバッファ範囲の開始時刻・終了時刻（秒単位）を取得できます。

Video bufferedプロパティの使用例

ここでは、ボタンをクリックすると動画のバッファ済み秒数を表示する簡単なサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video buffered</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Video-buffered</legend>
            <video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="Get Buffered Seconds">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var demo = document.getElementById("demo");
    demo.buffered = true;
    function getTrackDetails() {
        divDisplay.textContent = 'Buffered: '+demo.buffered.end(0)+' seconds';
    }
</script>
</body>
</html>

コードの解説

  • <video>要素： id「demo」を持つ動画プレイヤーを配置し、controls属性で再生コントロールを表示しています。
  • getTrackDetails()関数： ボタンクリック時に呼び出され、demo.buffered.end(0)によって最初のバッファ範囲の終了位置（秒数）を取得します。
  • divDisplay： 取得したバッファ秒数をテキストとして画面に表示します。

実行結果

動画を再生せずに「Get Buffered Seconds」ボタンをクリックした場合：

HTML DOM Videoのbufferedプロパティとは？使い方をサンプルコード付きで解説

この場合、まだ動画が読み込まれていないため、バッファ秒数は「0」と表示されます。

動画を再生した後に「Get Buffered Seconds」ボタンをクリックした場合：

HTML DOM Videoのbufferedプロパティとは？使い方をサンプルコード付きで解説

動画を再生するとブラウザがデータを読み込むため、その時点までのバッファ済み秒数が表示されます。

まとめ

Video要素のbufferedプロパティを使えば、動画のバッファ状態をTimeRangesオブジェクトとして簡単に取得できます。end(0)などのメソッドと組み合わせることで、現在どの程度まで動画データが読み込まれているかを把握でき、ユーザーにバッファ状況を視覚的に伝えるUIの実装などに応用できます。

  1. HTML DOM Video playbackRateプロパティの使い方！再生速度の取得・設定を解説

    HTML DOMのVideo playbackRateプロパティは、動画メディアの現在の再生速度に対応する数値を取得・設定できるプロパティです。標準の再生速度は「1.0」で、値を大きくすれば早送り、小さくすればスロー再生として動作します。 構文 以下が構文の基本形です。 playbackRateの値を取得する（数値として返す） mediaObject.playbackRate playbackRateに値を設定する mediaObject.playbackRate = number 注意：設定できる数値の最大値は「16」です。また、「0.0」を指定すると動画は静止した状態になります。 Vide

  2. HTML DOMのVideo widthプロパティとは？動画の幅を取得・設定する方法

    HTML DOM の Video width プロパティは、<video> 要素で表示されるメディアの幅（width）に対応する数値を取得・設定できるプロパティです。単位はピクセル（px）で扱われ、JavaScript から動的に動画プレイヤーの横幅を変更したい場合に活用できます。 構文（Syntax） width プロパティの基本的な構文は以下のとおりです。 現在の幅（px）を取得する場合 mediaObject.width 幅（px）を新しく設定する場合 mediaObject.width = number なお、HTML 属性として記述された初期値は <video wi