HTML 入門

HTML <source>タグ

<source> タグは、同一の <audio> または <video> 要素に対して複数のメディアリソースを提供することを可能にします。これにより、ブラウザは自身の再生能力やユーザーのネットワーク状況に基づき、最も適切なフォーマットをインテリジェントに選択できるようになります。

これは、ユーザーがどのようなブラウザやデバイスを使用していても、スムーズでアクセシブルなマルチメディア体験を得られるようにするための重要な要素です。
もし <source> タグを使用せず単一のメディアファイルのみを提供した場合、そのフォーマットをサポートしていないユーザーを排除してしまう可能性があります。

1.  <source>タグの基本理解

<source> タグは空要素（Void element）であり、終了タグを持ちません。主に <audio> や <video> 要素の内部で、代替となるメディアリソースを指定するために使用されます。

同一メディアの異なるファイルフォーマットや解像度を複数提供する場合に、このタグを配置します。ブラウザは上から下へとスキャンを行い、自身がサポートしている最初の <source> 要素を選択し、残りの要素は無視します。

2.  <source>タグの主要な属性

  • src: メディアファイルの URL を指定します。ブラウザにファイルの場所を教えるための最も重要な属性です。
  • type: メディアリソースの MIME タイプを指定します。これにより、ブラウザはファイルをダウンロードする前に、再生可能かどうかを迅速に判断できます。パフォーマンス最適化において、正しい MIME タイプを提供することは極めて重要です。

2.1 ブラウザによる選択ロジック

ブラウザは、以下のプロセスで再生するファイルを選択します：

  1. <audio> または <video> タグ内に出現する <source> 要素の順番に従って走査します。
  2. type 属性を確認し、その MIME タイプをサポートしているかチェックします。
  3. サポートしている場合、src 属性で指定されたファイルのロードおよび再生を試みます。
  4. その MIME タイプが未サポート、あるいはファイルのロードに失敗した場合は、次の <source> 要素へ移動します。
  5. すべての <source> 要素がサポートされていない場合、ブラウザはフォールバック情報（通常は <audio> や <video> タグ内に記述されたテキスト）を表示します。

3. 実戦的な実装例

<video> および <audio> 要素で <source> タグをどのように活用するか見ていきましょう。

3.1 ビデオ要素での使用例

<video width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  <source src="myvideo.ogv" type="video/ogg">
  お使いのブラウザは video タグをサポートしていません。
</video>

この例のポイント：

  • width、height、controls 属性を持つ <video> 要素を定義しています。
  • MP4、WebM、Ogg フォーマットの同一ビデオを指す 3 つの <source> 要素を提供しています。
  • type 属性で各フォーマットの MIME タイプを明示しています。
  • ブラウザがいずれのフォーマットもサポートしていない場合、「お使いのブラウザは video タグをサポートしていません。」と表示されます。

3.2 オーディオ要素での使用例

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

この例では、MP3、Ogg、WAV フォーマットの同一オーディオに対して、適切な MIME タイプを指定して提供しています。

4. MIME タイプの詳細解説

<source> タグの type 属性で使用される MIME タイプは、ブラウザに「どのような種類のファイルを扱おうとしているか」を伝えます。主要な MIME タイプは以下の通りです。

4.1 ビデオ

  • video/mp4: MP4 ビデオ用（H.264 ビデオコーデックと AAC オーディオコーデックを使用）。
  • video/webm: WebM ビデオ用（VP8/VP9 ビデオコーデックと Vorbis/Opus オーディオコーデックを使用）。
  • video/ogg: Ogg ビデオ用（Theora ビデオコーデックと Vorbis オーディオコーデックを使用）。

4.2 オーディオ

  • audio/mpeg: MP3 オーディオ用。
  • audio/ogg: Ogg オーディオ用（Vorbis コーデックを使用）。
  • audio/wav: WAV オーディオ用。
  • audio/aac: AAC オーディオ用。

注意: 正しい MIME タイプを使用することは極めて重要です。誤ったタイプを指定すると、ブラウザがそのフォーマットを実際にはサポートしていても、再生に失敗する可能性があります。

5. ベストプラクティス

  • マルチフォーマットの提供: クロスブラウザでの広範な互換性を確保するため、常に複数のフォーマットを用意しましょう。MP4 は基本の互換性として必須ですが、WebM は圧縮率に優れ、多くのモダンブラウザでサポートされています。
  • 優先順位の最適化: 優先的に使用したいフォーマットを最初に記述します。例えば、ファイルサイズが小さい WebM を優先したい場合は、MP4 よりも前に配置します。
  • 正確な MIME タイプを指定: 各フォーマットに対応する MIME タイプが正しいか、念入りにチェックしてください。
  • フォールバック情報を含める: HTML5 のメディア要素をサポートしていない古いブラウザのユーザーのために、必ず代替テキストを含めるようにしてください。