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

【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

HTML DOM の Video オブジェクトは、HTML の <video> 要素を JavaScript から操作するためのインターフェースです。この記事では、Video オブジェクトの生成方法、利用できるプロパティやメソッドの一覧、そして実際に動くサンプルコードを交えてわかりやすく解説します。

Videoオブジェクトの作成方法

<video> 要素は、JavaScript の createElement() メソッドを使って動的に生成できます。

var videoObject = document.createElement("VIDEO")

こうして作成した videoObject に対して、後述のプロパティやメソッドを通じて動画の制御を行うことができます。

Videoオブジェクトの主なプロパティ一覧

プロパティ説明
audioTracks利用可能な音声トラックを表す AudioTrackList オブジェクトを返します
autoplay動画の準備ができ次第、自動的に再生を開始するかどうかを設定・取得します
buffered動画のバッファ済み（読み込み済み）範囲を表す TimeRanges オブジェクトを返します
controller動画の現在のメディアコントローラーを表す MediaController オブジェクトを返します
controls再生・一時停止などの操作コントロールを表示するかどうかを設定・取得します
crossOrigin動画の CORS（クロスオリジン）設定を設定・取得します
currentSrc現在再生対象となっている動画の URL を返します
currentTime動画内の現在の再生位置（秒単位）を設定・取得します
defaultMutedデフォルトでミュート状態にするかどうかを設定・取得します
defaultPlaybackRate動画のデフォルトの再生速度を設定・取得します
duration動画の長さ（秒単位）を返します
ended動画の再生が終了したかどうかを返します
error動画のエラー状態を表す MediaError オブジェクトを返します
height動画の height 属性の値を設定・取得します
loop再生が終了するたびに最初から繰り返し再生するかどうかを設定・取得します
mediaGroup動画が所属するメディアグループの名前を設定・取得します
muted動画の音をミュート（消音）するかどうかを設定・取得します
networkState動画の現在のネットワーク状態を返します
paused動画が一時停止中かどうかを返します
playbackRate動画の現在の再生速度を設定・取得します
played動画の再生済み範囲を表す TimeRanges オブジェクトを返します
poster動画の poster 属性（サムネイル画像）の値を設定・取得します
preload動画の preload 属性（事前読み込みの指定）の値を設定・取得します
readyState動画の現在の準備状態（再生可能かどうか）を返します
seekable動画のシーク可能な範囲を表す TimeRanges オブジェクトを返します
seekingユーザーが現在シーク（再生位置の移動）中かどうかを返します
src動画の src 属性（動画ファイルの URL）の値を設定・取得します
startDate現在の時刻オフセットを表す Date オブジェクトを返します
textTracks利用可能なテキストトラック（字幕など）を表す TextTrackList オブジェクトを返します
videoTracks利用可能な映像トラックを表す VideoTrackList オブジェクトを返します
volume動画の音量を設定・取得します
width動画の width 属性の値を設定・取得します

実装例①：networkStateプロパティでネットワーク状態を取得する

ここでは、プロパティの一例として networkState プロパティ を使ったサンプルを見てみましょう。ボタンをクリックすると、動画の現在のネットワーク状態が画面に表示されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</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-networkState</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="setTrackDetails()" value="Set Source">
            <input type="button" onclick="getTrackDetails()" value="Get Network 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 = 'Network State: ' + demo.networkState;
    }
    function setTrackDetails() {
        demo.src = srcOfMedia;
        demo.load();
    }
</script>
</body>
</html>

実行結果

ソースが未定義の状態で「Get Network State」ボタンをクリックした場合：

【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

ソースは定義されているものの、ブラウザがまだデータをダウンロード中の場合：

【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

このように、networkState の戻り値によって、動画データの読み込み状況を数値で把握できます。

Videoオブジェクトの主なメソッド一覧

また、videoObject には以下のようなメソッドが用意されています。

メソッド説明
addTextTrack()動画に新しいテキストトラック（字幕など）を追加します
canPlayType()ブラウザが指定された動画形式を再生できるかどうかを判定します
load()video 要素を再読み込み（再レンダリング）します
play()動画の再生を開始します
pause()再生中の動画を一時停止します

実装例②：canPlayType()メソッドで対応フォーマットを判定する

続いて、canPlayType() メソッド を使ったサンプルを見てみましょう。ブラウザが mp4 形式に対応しているかどうかを判定し、結果に応じて処理を分岐させます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</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-canPlayType( )</legend>
            <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
            <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() {
        var ans = demo.canPlayType('video/mp4');
        if(ans !== ''){
            divDisplay.textContent = 'Browser supports mp4';
            demo.src = srcOfMedia;
            demo.load();
        }
        else
            divDisplay.textContent = 'Browser does not supports mp4';
    }
</script>
</body>
</html>

実行結果

「Does Browser Supports video/mp4?」ボタンをクリックする前：

【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

クリック後（mp4 対応ブラウザの場合）：

【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

canPlayType() は、対応している場合は "probably" や "maybe" といった文字列を返し、非対応の場合は空文字を返します。この特性を利用することで、ブラウザごとのフォーマット対応状況に合わせた柔軟な動画再生処理を実装できます。

まとめ

HTML DOM の Video オブジェクトを使えば、JavaScript だけで動画の再生・一時停止・速度変更・音量調整など、細かな制御が可能になります。プロパティで現在の状態を取得し、メソッドで操作を加えるという基本の流れを押さえておくと、独自の動画プレイヤーの開発にも役立ちます。ぜひ実際にサンプルコードを動かして、挙動を確認してみてください。

  1. HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

    MouseEventオブジェクトとはHTML DOMのMouseEvent（マウスイベント）オブジェクトは、ユーザーがマウスを使ってHTMLドキュメント上の要素とやり取りした際に発生するイベントを表すオブジェクトです。クリックや移動など、マウスに関するあらゆる操作を検出し、その詳細な情報（座標、押されたボタン、修飾キーの状態など）を取得することができます。MouseEventオブジェクトには、以下のようなプロパティやメソッドが用意されています。MouseEventの主なプロパティ・メソッド一覧プロパティ／メソッド説明altKeyマウスイベント発生時に、キーボードの「ALT」キーが押されていたか

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注