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

HTML DOM Video preloadプロパティの使い方を徹底解説

HTML DOM Video preloadプロパティとは

HTML DOM の Video preload プロパティは、動画データをいつ読み込むべきかを制作者が指定した値に対応する文字列を返します。この設定は、ブラウザ側の判断（通信環境やユーザー設定など）によって無視される場合がある点に注意してください。

デフォルト値は 「metadata」です。

構文

以下が構文の基本形です。

文字列値を取得する場合

mediaObject.preload

preload に文字列を設定する場合

mediaObject.preload = "auto | metadata | none";

preload に指定できる値

  • auto：ブラウザが動画ファイル全体を事前に読み込んでもよいことを示します。
  • metadata：動画の長さなどのメタデータのみを読み込みます（デフォルト）。
  • none：ページ読み込み時に動画を読み込まないことを示します。ユーザーが再生操作を行うまでデータは取得されません。

使用例

それでは、HTML DOM Video preload プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、preload の値を「none」から「metadata」に切り替えるサンプルです。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video preload</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-preload</legend>
            <video id="demo" width="320" preload="none" controls><source
            src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="Preload Video">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var demo = document.getElementById("demo");
        divDisplay.textContent = 'データセーバーモード有効。再生すると動画を読み込みます';
        function getTrackDetails() {
            demo.preload = 'metadata';
            divDisplay.textContent = 'データセーバーモード無効。プリロードが有効になりました';
        }
    </script>
</body>
</html>

実行結果

「Preload Video」ボタンをクリックする前

初期状態では preload が「none」に設定されているため、動画データは読み込まれず、「データセーバーモード有効」というメッセージが表示されます。

HTML DOM Video preloadプロパティの使い方を徹底解説

「Preload Video」ボタンをクリックした後

ボタンをクリックすると JavaScript によって preload が「metadata」に変更され、プリロードが有効になったことを示すメッセージが表示されます。

HTML DOM Video preloadプロパティの使い方を徹底解説

まとめ

Video preload プロパティを使えば、JavaScript から動的に動画の読み込み挙動を制御できます。通信量を節約したい場面では「none」、すぐに再生できる状態にしたい場面では「auto」や「metadata」を指定するなど、用途に応じて適切な値を選択しましょう。

  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