audio要素／video要素のプロパティ、メソッド、イベント一覧

audio要素／video要素について

ページに音楽ファイルを読み込むためのaudio要素と、動画ファイルを読み込むvideo要素はいずれもHTMLMediaElementの子孫要素です。

親要素が共通しているので、2つの要素は使えるプロパティ、メソッド、イベントのほとんどが共通しています。
一部、要素ごとに独自のプロパティやメソッドが用意されています。

以降は、audio要素とvideo要素が使用できるプロパティ、メソッド、イベントの内容を解説していきます。

プロパティ

audio要素とvideo要素で使用できるプロパティの一覧です。
内容の中にある「メディアファイル」は音楽ファイルと動画ファイルの両方を指す総称として使います。

「読み取りのみ」が「○」になっているプロパティは値の取得のみで、あとから変更することはできません。

メソッド

audio要素とvideo要素で使用できるメソッドの一覧です。

イベント

audio要素とvideo要素で発生するイベント一覧です。

発生したイベントを検出するときはaddEventListenerメソッドを使うか、イベントハンドラを使う2種類の方法があります。

addEventListenerメソッドを使う場合

addEventListenerメソッドを使う場合は、発生を検出したいイベントをイベントリスナーに登録します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  audioElement.addEventListener("play", (e) => {
    console.log("Play start");
  });

});

イベントハンドラを使う場合

イベントハンドラで発生したイベントを検出するときは、上記イベント一覧にあるイベント名の前に「on」を加えて設定します。
例えばイベント「play」であれば「onplay」として、以下のように設定して使います。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  audioElement.onplay = (e) => {
    console.log("Play start");
  };

});