第13回 メディア要素の追加 音声と動画 – audio, videoタグ – HTML入門講座

はじめに

現代のウェブページには、音声や動画といったメディア要素が欠かせません。HTML5では、<audio> や <video> タグを使って、簡単に音声や動画をページに埋め込むことができます。この講座では、これらのメディア要素の使い方や、ブラウザでの表示例を交えて、初心者にもわかりやすく解説していきます。

音声の埋め込み: <audio> 要素

HTML5では、<audio> タグを使って音声ファイルを直接ウェブページに埋め込むことができます。このタグを使うことで、追加のプラグインなしで音声ファイルを再生することができます。

基本的な音声の再生

<audio> タグを使用して音声を再生するには、controls 属性を追加することで、ユーザーが再生や一時停止を操作できるコントロールを表示できます。以下が基本的な音声埋め込みの例です。

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  お使いのブラウザはオーディオ要素をサポートしていません。
</audio>

上記のコードでは、audiofile.mp3 というファイルがページ上で再生可能になります。

音声タグの属性

<audio> タグには、いくつかの便利な属性があります：

• controls: ユーザーに再生、停止などのコントロールを表示します。
• autoplay: ページが読み込まれた時点で自動的に再生を開始します。
• loop: 音声が終わった後、再び最初から再生を開始します。
• muted: 初期状態で音声をミュートします。

音声再生の例

以下は、autoplay 属性を使用して自動再生する音声の例です。

<audio controls autoplay>
  <source src="audiofile.mp3" type="audio/mpeg">
  お使いのブラウザはオーディオ要素をサポートしていません。
</audio>

※音声の自動再生は、ブラウザの設定やユーザーの許可に依存します。

動画の埋め込み: <video> 要素

HTML5では、<video> タグを使用して動画をウェブページに埋め込むことができます。<audio> タグと同様に、<video> タグは追加のプラグインを必要とせず、標準でブラウザ上に動画を表示できます。

基本的な動画の埋め込み

<video> タグを使って、簡単に動画をページに埋め込むことができます。controls 属性を使用して、再生や停止の操作ができるコントロールを表示します。

<video controls>
  <source src="videofile.mp4" type="video/mp4">
  お使いのブラウザはビデオ要素をサポートしていません。
</video>

このコードでは、videofile.mp4 というファイルがページ上で再生可能になります。

動画タグの属性

<video> タグにも便利な属性があります：

• controls: ユーザーに再生、停止などのコントロールを表示します。
• autoplay: ページが読み込まれた時点で自動的に再生を開始します。
• loop: 動画が終わった後、再び最初から再生を開始します。
• muted: 初期状態で動画を無音で再生します。
• poster: 動画が読み込まれる前に表示する画像を指定します。
• width、height: 動画の表示サイズを指定します。

動画再生の例

以下は、poster 属性を使用して動画の読み込み前に画像を表示する例です。

<video controls poster="thumbnail.jpg">
  <source src="videofile.mp4" type="video/mp4">
  お使いのブラウザはビデオ要素をサポートしていません。
</video>

上記の例では、動画が再生される前に「thumbnail.jpg」が表示されます。

メディアの互換性について

音声や動画を埋め込む際に考慮すべき点として、ファイル形式の互換性があります。すべてのブラウザが同じ形式をサポートしているわけではないため、複数のファイル形式を提供することで、互換性の問題を避けることができます。

音声の互換性

主要な音声フォーマットとその対応ブラウザは以下の通りです：

• MP3: 最も広くサポートされている音声形式（audio/mpeg）
• Ogg Vorbis: フリーでオープンな音声形式（audio/ogg）
• AAC: 高品質な音声形式、iOSデバイスなどでサポート（audio/aac）

音声の互換性を考慮した例

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  お使いのブラウザはオーディオ要素をサポートしていません。
</audio>

動画の互換性

主要な動画フォーマットとその対応ブラウザは以下の通りです：

• MP4（H.264コーデック）: 最も広くサポートされている動画形式（video/mp4）
• WebM: オープンで軽量な動画形式（video/webm）
• Ogg Theora: フリーでオープンな動画形式（video/ogg）

動画の互換性を考慮した例

<video controls>
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.webm" type="video/webm">
  お使いのブラウザはビデオ要素をサポートしていません。
</video>

この例では、MP4形式がサポートされていないブラウザであっても、WebM形式がサポートされていれば動画が再生されます。

まとめ

今回は、HTML5を使った音声や動画の埋め込み方法について学びました。<audio> と <video> タグを使えば、プラグインなしで簡単にメディアを再生することができます。また、互換性のために複数のファイル形式を提供することも重要です。次回は、CSSを使ってこれらのメディア要素のスタイリングについて学び、より魅力的なウェブページを作成しましょう！