Webサイトに音楽や動画を直接埋め込みたいと思ったことはありませんか？ かつてはFlashなどの外部プラグインが必要でしたが、HTML5の登場により、タグ一つで簡単にメディアを再生できるようになりました。
今回は、基本となる <audio> タグと <video> タグの使い方を解説します。
1. audioタグ：音声ファイルの埋め込み
音楽や音声データを埋め込むためのタグです。
基本的な書き方
HTML
<audio src="music.mp3" controls>
お使いのブラウザは音声要素をサポートしていません。
</audio>
- src属性: 再生したい音声ファイルのパスを指定します。
- controls属性: 再生ボタンや音量調整バーを表示します（これがないと何も表示されません）。
2. videoタグ：動画ファイルの埋め込み
動画を表示するためのタグで、属性を指定することで挙動を細かく制御できます。
基本的な書き方
HTML
<video src="movie.mp4" controls width="640">
お使いのブラウザは動画要素をサポートしていません。
</video>
よく使う便利な属性
- autoplay: ページを開いた瞬間に自動再生します。
- muted: 音声をミュート状態で再生します（自動再生にはこれが必須の場合が多いです）。
- loop: 動画を繰り返し再生します。
- poster: 動画が読み込まれる前に表示する「サムネイル画像」を指定できます。
3. ブラウザ対応を考慮した「sourceタグ」の活用
動画や音声の形式（mp4, ogg, webmなど）によっては、特定のブラウザで再生できないことがあります。そんな時は <source> タグを使いましょう。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>動画を再生できません。</p>
</video>
このように記述すると、ブラウザが上から順に再生可能なファイルを自動で選んでくれます。
まとめ
- audioタグは音声を、videoタグは動画を簡単に扱える。
- controls属性を忘れると、ユーザーが再生操作できなくなるので注意！
- 対応フォーマットを増やすなら sourceタグ を使おう。
ぜひ、あなたのブログやサイトにもメディアコンテンツを取り入れて、より魅力的なページを作ってみてくださいね！
コメント