HTML オーディオ/ビデオ DOM 参考手冊

HTML5 DOMは<audio>および<video>要素のためにメソッド、属性、およびイベントを提供します。

これらのメソッド、属性、およびイベントにより、JavaScriptを使用して<audio>および<video>要素を操作することができます。

HTML オーディオ/ビデオ メソッド

メソッド 説明
addTextTrack() オーディオ/ビデオに新しいテキストトラックを追加します。
canPlayType() ブラウザが指定されたオーディオ/ビデオタイプを再生できるか検出します。
load() オーディオ/ビデオ要素を再読み込みします。
play() オーディオ/ビデオの再生を開始します。
pause() 現在再生中のオーディオ/ビデオを一時停止します。

HTML オーディオ/ビデオ プロパティ

HTML オーディオ/ビデオ属性
属性 説明
audioTracks 使用可能なオーディオトラックを表す AudioTrackList オブジェクトを返します。
autoplay 読み込みが完了した後に自動的にオーディオ/ビデオを再生するかどうかを設定または取得します。
buffered オーディオ/ビデオのバッファされた部分を表す TimeRanges オブジェクトを返します。
controller オーディオ/ビデオの現在のメディアコントローラーを表す MediaController オブジェクトを返します。
controls オーディオ/ビデオにコントロール（再生/一時停止など）を表示するかどうかを設定または取得します。
crossOrigin オーディオ/ビデオの CORS 設定を設定または取得します。
currentSrc 現在のオーディオ/ビデオの URL を返します。
currentTime オーディオ/ビデオの現在の再生位置を秒単位で設定または取得します。
defaultMuted オーディオ/ビデオのデフォルトのミュート設定を設定または取得します。
defaultPlaybackRate オーディオ/ビデオのデフォルトの再生速度を設定または取得します。
duration 現在のオーディオ/ビデオの長さを秒単位で返します。
ended オーディオ/ビデオの再生が終了したかどうかを返します。
error オーディオ/ビデオのエラーステータスを表す MediaError オブジェクトを返します。
loop オーディオ/ビデオが終了時に再生を繰り返すかどうかを設定または取得します。
mediaGroup オーディオ/ビデオが属するグループを設定または取得します（複数のオーディオ/ビデオ要素を接続するため）。
muted オーディオ/ビデオをミュートするかどうかを設定または取得します。
networkState オーディオ/ビデオの現在のネットワークステータスを返します。
paused オーディオ/ビデオが一時停止しているかどうかを設定または取得します。
playbackRate オーディオ/ビデオの再生速度を設定または取得します。
played オーディオ/ビデオの再生された部分を表す TimeRanges オブジェクトを返します。
preload ページの読み込み後にオーディオ/ビデオを事前読み込みするかどうかを設定または取得します。
readyState オーディオ/ビデオの現在の準備状態を返します。
seekable オーディオ/ビデオのシーク可能な部分を表す TimeRanges オブジェクトを返します。
seeking ユーザーがオーディオ/ビデオ内で検索しているかどうかを返します。
src オーディオ/ビデオ要素の現在のソースを設定または取得します。
startDate 現在の時間オフセットを表す Date オブジェクトを返します。
textTracks 使用可能なテキストトラックを表す TextTrackList オブジェクトを返します。
videoTracks 使用可能なビデオトラックを表す VideoTrackList オブジェクトを返します。
volume オーディオ/ビデオの音量を設定または取得します。

HTML オーディオ/ビデオイベント

HTML オーディオ/ビデオイベント
イベント 説明
abort オーディオ/ビデオの読み込みが中止されたときに発生します。
canplay ブラウザーがオーディオ/ビデオの再生を開始できるときに発生します。
canplaythrough ブラウザーがバッファリングせずにオーディオ/ビデオを再生できるときに発生します。
durationchange オーディオ/ビデオの長さが変更されたときに発生します。
emptied 現在のプレイリストが空になったときに発生します。
ended 現在のプレイリストが終了したときに発生します。
error オーディオ/ビデオの読み込み中にエラーが発生したときに発生します。
loadeddata ブラウザーがオーディオ/ビデオの現在のフレームを読み込んだときに発生します。
loadedmetadata ブラウザーがオーディオ/ビデオのメタデータを読み込んだときに発生します。
loadstart ブラウザーがオーディオ/ビデオの読み込みを開始したときに発生します。
pause オーディオ/ビデオが一時停止されたときに発生します。
play オーディオ/ビデオが再生を開始したとき、または一時停止が解除されたときに発生します。
playing バッファリング後にオーディオ/ビデオが再生の準備ができたときに発生します。
progress ブラウザーがオーディオ/ビデオをダウンロードしているときに発生します。
ratechange オーディオ/ビデオの再生速度が変更されたときに発生します。
seeked ユーザーがオーディオ/ビデオの新しい位置に移動/ジャンプしたときに発生します。
seeking ユーザーがオーディオ/ビデオの新しい位置に移動/ジャンプを開始したときに発生します。
stalled ブラウザーがメディアデータを取得しようとしたが、データが利用できないときに発生します。
suspend ブラウザーが意図的にメディアデータの取得を停止したときに発生します。
timeupdate 現在の再生位置が変更されたときに発生します。
volumechange 音量が変更されたときに発生します。
waiting ビデオが次のフレームをバッファリングするために停止したときに発生します。 
        <!DOCTYPE html>
        <html>
        <body>

        <video id="myVideo" width="320" height="176" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          Your browser does not support the video tag.
        </video>

        <br>

        <button onclick="playVideo()">Play</button>
        <button onclick="pauseVideo()">Pause</button>

        <script>
        var video = document.getElementById("myVideo");

        function playVideo() {
          video.play();
        }

        function pauseVideo() {
          video.pause();
        }
        </script>

        </body>
        </html>

HTML オーディオ/ビデオ DOM リファレンス マニュアル

関連 Q&A

Q1: canPlayType() メソッドはどのように使用しますか？

A1: canPlayType() メソッドはブラウザが特定のタイプのオーディオ/ビデオを再生できるかを判断するために使用されます。例えば： videoElement.canPlayType('video/mp4');

Q2: autoplay プロパティのデフォルト値は何ですか？

A2: autoplay プロパティのデフォルト値は false です。

Q3: オーディオ/ビデオ要素の currentTime プロパティは何を意味しますか？

A3: currentTime プロパティはオーディオ/ビデオの現在の再生位置を秒単位で設定または取得するために使用されます。