HTML マルチメディア
テキストや画像だけでは伝えきれない情報があるとき、マルチメディアの出番です。HTMLにおけるマルチメディアとは、動画、音声、アニメーション、音楽などを指します。以前は Flash などの外部プラグインが必要でしたが、現在の HTML5 ではブラウザがネイティブでこれらをサポートしています。
1. マルチメディア形式 (Multimedia Formats)
メディアファイルには様々な形式がありますが、すべてのブラウザがすべての形式をサポートしているわけではありません。Web制作で一般的に使われる形式は以下の通りです。
1.1 ビデオ形式 (Video Formats)
| 形式 | 拡張子 | 説明 |
|---|---|---|
| MP4 | .mp4 | Webの標準。 すべてのモダンブラウザがサポート。H.264 推奨。 |
| WebM | .webm | Googleが開発した高品質かつ軽量な形式。 |
| Ogg | .ogv | オープンソースの形式。 |
1.2 オーディオ形式 (Audio Formats)
| 形式 | 拡張子 | 説明 |
|---|---|---|
| MP3 | .mp3 | 最も一般的で、すべてのブラウザで動作。 |
| WAV | .wav | 高品質だがファイルサイズが大きい。 |
| Ogg | .ogg | オープンソースの音声形式。 |
2. HTML <video> 要素
Webページに動画を埋め込むには <video> タグを使用します。controls 属性を追加することで、再生・停止・音量調節などのボタンが表示されます。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
お使いのブラウザは video タグをサポートしていません。
</video><source>: 複数の形式を用意しておくことで、ブラウザが対応しているものを自動的に選んでくれます。- フォールバック・テキスト: タグがサポートされていない場合に表示されるメッセージを記述します。
3. HTML <audio> 要素
音声ファイルを再生するには <audio> タグを使用します。動画と同様に controls 属性が必要です。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
お使いのブラウザは audio 要素をサポートしていません。
</audio>4. 自動再生の注意点 (Autoplay)
autoplay 属性を付けるとページ読み込み時に自動で再生が始まりますが、最近のブラウザは**「音が出る動画の自動再生」をブロックする**傾向にあります。
[!TIP]
ユーザーに不快感を与えず、確実に自動再生させたい場合は、必ずmuted（消音）属性を組み合わせてください。<video autoplay muted controls> ... </video>
5. まとめ
マルチメディアを扱う際は、以下の3点を意識しましょう。
- ブラウザ互換性: 迷ったら MP4 (Video) と MP3 (Audio) を選びましょう。
- アクセシビリティ:
controlsを表示し、ユーザーが自由に操作できるようにしましょう。 - 最適化: ファイルサイズが大きすぎるとページの読み込みが遅くなるため、適切なビットレートへの圧縮が不可欠です。