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

HTML DOM Videoのpausedプロパティとは？動画の再生状態を判定する方法を解説

HTML DOM の Video paused プロパティは、動画が現在再生中かどうかに応じて真偽値（true / false）を返します。動画が一時停止中または未再生の状態であれば true、再生中であれば false が返されます。

このプロパティは読み取り専用であり、JavaScript から動画プレイヤーの状態を確認したい場合に非常に便利です。例えば、動画が一時停止されたタイミングで画面を暗くする演出など、再生状態に応じた UI の切り替えに活用できます。

構文

paused プロパティの構文は以下の通りです。

真偽値を返す場合：

mediaObject.paused

ここで mediaObject は、<video> 要素を表すオブジェクト（HTMLVideoElement）です。

HTML DOM Video paused プロパティの使用例

次の例では、動画をクリックするたびに paused プロパティの値を判定し、動画が一時停止中であればフォーム領域の背景を暗くし、再生中であれば元の明るい表示に戻しています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video paused</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    .dimLight {
        background-color: #000;
    }
</style>
</head>
<body>
    <form class="dimLight" id="formSelect">
        <fieldset>
            <legend>HTML-DOM-Video-paused</legend>
            <div onclick="getTrackDetails()">
            <video id="demo" width="320" controls><source src='https://www.tutorialspoint.com/html5/foo.mp4' type="video/mp4"></video><br>
            </div></fieldset></form>
<script>
    var formSelect = document.getElementById("formSelect");
    var demo = document.getElementById("demo");
    demo.autoplay = true;
    function getTrackDetails() {
        if(demo.paused)
            formSelect.classList.add('dimLight');
        else
            formSelect.classList.remove('dimLight');
    }
</script>
</body>
</html>

出力結果

動画をクリックして一時停止する前の表示：

HTML DOM Videoのpausedプロパティとは？動画の再生状態を判定する方法を解説

動画をクリックして一時停止した後の表示：

HTML DOM Videoのpausedプロパティとは？動画の再生状態を判定する方法を解説

補足：関連するメソッド

paused プロパティと合わせて覚えておくと便利なのが、play() メソッドと pause() メソッドです。play() で動画を再生開始し、pause() で一時停止できます。これらのメソッドを呼び出した後に paused プロパティを参照することで、動画が意図したとおりに制御されているかを確認できます。


  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