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

HTML DOM Video readyStateプロパティの使い方を解説！戻り値の一覧とサンプルコード

HTML DOM の Video readyState プロパティは、動画が現在どの程度再生可能な状態にあるかを示す数値を返します。この値を確認することで、メディアデータの読み込み状況を把握し、適切なタイミングで再生や操作を行うことができます。

構文

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

mediaObject.readyState

戻り値の一覧

このプロパティが返す数値とそれぞれの意味は次のとおりです。

  • 0（HAVE_NOTHING）：利用可能な情報がまだ何もない状態
  • 1（HAVE_METADATA）：メタデータの読み込みが完了し、動画のシーク（位置移動）が可能な状態
  • 2（HAVE_CURRENT_DATA）：現在の再生位置のデータはあるものの、次のフレームを再生するには不十分な状態
  • 3（HAVE_FUTURE_DATA）：現在の位置に加えて、少なくとも2フレーム以上先のデータも利用可能な状態
  • 4（HAVE_ENOUGH_DATA）：再生を開始できるだけの十分なデータが揃っている状態

実際の開発では、この値を監視することで「動画が再生できるようになるまでローディング画面を表示する」といった制御が可能になります。また、readyState の変化に応じて発火する canplay や canplaythrough などのイベントと組み合わせると、より柔軟な実装ができます。

サンプルコード

それでは、HTML DOM Video readyState プロパティの具体的な使用例を見てみましょう。以下の例では、「Set Source」ボタンで動画ソースを設定し、「Get ready State」ボタンで現在の readyState の値を取得して表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video readyState</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-readyState</legend>
            <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
            <input type="button" onclick="setTrackDetails()" value="Set Source">
            <input type="button" onclick="getTrackDetails()" value="Get ready State">
            <div id="divDisplay">
            </div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var demo = document.getElementById("demo");
        var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
        function getTrackDetails() {
            divDisplay.textContent = 'ready State: '+demo.readyState;
        }
        function setTrackDetails() {
            demo.src = srcOfMedia;
            demo.load();
        }
    </script>
</body>
</html>

実行結果

動画ソースが設定されていない状態で「Get ready State」ボタンをクリックすると、以下のように表示されます。

HTML DOM Video readyStateプロパティの使い方を解説！戻り値の一覧とサンプルコード

次に、動画ソースを設定した後に「Get ready State」ボタンをクリックすると、読み込み状況に応じた数値が表示されます。

HTML DOM Video readyStateプロパティの使い方を解説！戻り値の一覧とサンプルコード

このように、readyState プロパティを使えば動画の読み込み状態を数値として簡単に取得でき、ユーザー体験を損なわない動画プレイヤーの実装に役立ちます。

  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