audio / video タグ


audio タグ

 プラグインを使えば、以前からブラウザで音を鳴らせました。HTML5のaudioタグはプラグインなしで音を鳴らすことができます。

 対応する音声ファイル形式は mp3, ogg, wav などですが、ブラウザによって再生できる形式が異なります。現在、主要ブラウザはすべて mp3 に対応しているので、mp3 を使うのがよさそうです。

 controls属性を指定しないと何も表示されないので注意してください。その場合は、スクリプトで制御する必要があります。

<audio src="sorosoro.mp3" controls></audio>

 下のようにすると、候補の中から再生可能な形式を選んで再生してくれるようです。どれも再生できない場合は、「このブラウザでは再生できません。」と表示されます。はずですが、IE11では「無効なソース」と表示されてしまいます。

<audio src="sorosoro.wav" preload="metadata" controls>
 <source src="sorosoro.mp3" type="audio/mpeg">
 <source src="sorosoro.ogg" type="audio/ogg">
 <source src="sorosoro.wav" type="audio/wav">
「このブラウザでは再生できません。」
</audio>


audioタグの属性

属性説明
autoplay(例) autoplay自動演奏を行う。
controls(例) controlsコントロールを表示する。
loop(例) loopループ演奏を行う。
muted(例) mutedミュートにする。
preloadauto
metadata
none
ページがロードされたときの動作を指定する。
src(例) src="voice.mp3"音声ファイルのURLを指定する。

sourceタグの属性

属性説明
media(注意) 主要ブラウザのサポートなし。
src(例) src="voice.mp3"音声ファイルのURL
type(例) type="audio/mpeg"音声ファイルの種別を指定する。

グローバル属性, イベント属性


video タグ

 プラグインを使えば、以前からビデオの再生ができましたが、HTML5ではvideoタグを使ってビデオの再生が可能になりました。再生可能なビデオ形式は、mp4, WebM, ogg などですが、IEが再生できるのは、mp4だけなのでmp4を使うのがよさそうです。ChromeとFirefoxはこれらすべてに対応しています。

 mp4でもすべての動画が再生できるわけではありません。中で使われているCodecによっては再生できません。

<video src="MVI_osaka.mp4" controls></video>

 audioタグと同じように source タグを使って動画を指定することもできます。こちらのほうがきめ細かな指定が可能です。

<video controls>
 <source src="MVI_osaka.mp4" type="video/mp4">
 <source src="MVI_toumei.webm" type="video/webm">
 この動画は再生できません。
</video>

videoタグの属性

属性説明
autoplay(例) autoplay自動演奏を行う。
controls(例) controlsコントロールを表示する。
height(例) height="320"プレイヤーの高さ
loop(例) loopループ演奏を行う。
muted(例) mutedミュートにする。
preloadauto
metadata
none
ページがロードされたときの動作を指定する。
src(例) src="voice.mp3"音声ファイルのURLを指定する。
width(例) width="240"プレイヤーの幅


sourceタグの属性, グローバル属性, イベント属性

 

このページの先頭へ戻る