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

HTML DOM Video load()メソッドの使い方を解説！動画の再読み込み方法とサンプルコード

HTML DOMのVideo load()メソッドは、src属性などの特定の属性がユーザーやスクリプトによって更新された後に、その変更内容を反映させるためにvideo要素を再読み込み（再レンダリング）するために使用されます。

構文

load()メソッドの構文は以下の通りです。

videoObject.load()

このメソッドは引数を受け取らず、戻り値も返しません。load()が呼び出されると、メディア要素がリセットされ、選択されているリソースが最初から再び読み込まれます。そのため、再生速度や再生位置などの設定を変更した場合でも、load()を実行することで確実に新しい状態へ反映させることができます。

例

それでは、Video load()メソッドの具体的な使用例を見てみましょう。以下のサンプルでは、ボタンのクリックによって動画のデフォルト再生速度（defaultPlaybackRate）を変更し、load()メソッドを使ってその変更を動画に反映させています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video load()</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-load( )</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(1)" value="Slow (<<)">
            <input type="button" onclick="getTrackDetails(2)" value="Fast (>>)">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var demo = document.getElementById("demo");
    function getTrackDetails(val) {
        if(val === 1){
            demo.defaultPlaybackRate -= 0.5;
            demo.load();
            divDisplay.textContent = 'Default Playback Set: '+demo.defaultPlaybackRate;
        }
        else{
            demo.defaultPlaybackRate += 0.5;
            demo.load();
            divDisplay.textContent = 'Default Playback Set: '+demo.defaultPlaybackRate;
        }
    }
</script>
</body>
</html>

出力

「Fast (>>)」ボタンを2回クリックした場合：

HTML DOM Video load()メソッドの使い方を解説！動画の再読み込み方法とサンプルコード

「Slow (<<)」ボタンをクリックした場合：

HTML DOM Video load()メソッドの使い方を解説！動画の再読み込み方法とサンプルコード

このように、defaultPlaybackRateプロパティで再生速度を変更しただけでは即座に反映されないケースがありますが、load()メソッドを呼び出すことで、変更後の設定が確実に適用されます。動画のソースや属性を動的に切り替えるWebアプリケーションを開発する際には、ぜひ活用してみてください。

  1. HTML DOM Video load()メソッドの使い方を解説！動画の再読み込み方法とサンプルコード

    HTML DOMのVideo load()メソッドは、src属性などの特定の属性がユーザーやスクリプトによって更新された後に、その変更内容を反映させるためにvideo要素を再読み込み（再レンダリング）するために使用されます。 構文 load()メソッドの構文は以下の通りです。 videoObject.load() このメソッドは引数を受け取らず、戻り値も返しません。load()が呼び出されると、メディア要素がリセットされ、選択されているリソースが最初から再び読み込まれます。そのため、再生速度や再生位置などの設定を変更した場合でも、load()を実行することで確実に新しい状態へ反映させることがで

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

    HTML DOM の Video ended プロパティは、動画が最後まで再生し終えたかどうかを示すブール値（true/false）を返します。動画再生の進行状況を判定したい場合に便利なプロパティです。構文ended プロパティの構文は以下の通りです。ブール値を返す場合：mediaObject.ended戻り値の意味は次の通りです。true：動画の再生が終端に達しているfalse：動画の再生がまだ終わっていないそれでは、HTML DOM Video ended プロパティの具体的な使用例を見ていきましょう。サンプルコード<!DOCTYPE html> <html> &l