@ HTML

audio 要素・video 要素

HTML5 では HTML 文書へ簡単にマルチメディアコンテンツを埋め込むことを可能にする、audio 要素および video 要素を使用したビルトインのメディアサポートが導入されました。

audio 要素

audio 要素を使って、音声を文書内に埋め込むことができます。この要素に対応しているブラウザでは、プラグインを使わずに音声を再生することができます。

source 要素を指定することで、ブラウザに応じて異なる形式のデータを指定することができます。

elements_audio_01

<audio controls>
  <source src="audio/intro.mp3" type="audio/mp3">
  <source src="audio/intro.ogg" type="audio/ogg">
  <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
audio 要素の属性
属性 説明
src 動画のファイルパス
controls 再生 / 一時停止 / 再生停止 / ボリュームなどを表示する
autoplay 自動的にオーディオを再生する
loop 自動的に繰り返し再生します
preload 値が “none” 場合はファイルをバッファリングしません。
値が “auto” 場合はメディアファイルをバッファリングします。
値が “metadata” 場合はファイルのメタデータだけをバッファリングします。

オーディオファイルの形式変換を提供しているサービス

Online Audio Converter – Сonvert audio files to MP3, WAV, MP4, M4A, OGG or iPhone Ringtones

video要素

video要素を使って、動画を文書内に埋め込むことができます。この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することができます。

elements_video_01

<video width="360" height="240" controls poster="poster/intro.png">
  <source src="video/intro.mp4">
  <source src="video/intro.ogg">
  <source src="video/intro.webm">
  <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
video 要素の属性
属性 説明
controls 再生 / 一時停止 / 再生停止 / ボリュームなどを表示する
src 動画のファイルパス
poster 動画の代わりに表示する画像
width 動画の幅
height 動画の高さ

メディアファイルの形式変換を提供しているサービス

Online converter – convert video, images, audio and documents for free

video要素、audio要素をJavaScriptから操作

HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。

これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。

elements_video_02

<video width="360" height="240" controls poster="poster/intro.png">
  <source src="video/intro.mp4">
  <source src="video/intro.ogg">
  <source src="video/intro.webm">
  <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

<script>
window.onload = function() {
  var v = document.getElementById("video");
  document.getElementById("duration").innerHTML = v.duration;
  v.addEventListener("timeupdate", function() {
    document.getElementById("position").innerHTML = v.currentTime;
  }, false);
};
</script>

HTML5 の audio 要素と video 要素の使用 – MDN