sourceタグの基本と活用
sourceタグとは何か？
<source> タグは、HTML5で導入された要素の一つで、主に<video> タグや <audio> タグなどのメディア要素内で使用されます。このタグは、複数のメディアリソースを定義し、ブラウザが最適なものを選択する際に使用されます。具体的には、ビデオやオーディオコンテンツのソースを指定するために使用されます。
参考：mdn web docs
<source>は HTML の要素で、<picture>、<audio>、<video>の各要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、すなわち中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。
例えば、ビデオを<video> タグで埋め込む場合、異なるフォーマットや解像度のビデオファイルを提供して、ブラウザがその環境に最適なファイルを選択できるようにします。これにより、ユーザーの帯域幅やデバイスの互換性に応じて、適切なビデオファイルを再生できるようになります。
（※帯域幅とは、通信速度の上限、一度に送信できるデータの量のこと）
下は、<video> 要素と <source> タグを使ってビデオを埋め込む例です。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
お使いのブラウザはビデオタグをサポートしていません。
</video>この例では、ブラウザが最初にmovie.mp4形式のビデオファイルをサポートしているか確認し、サポートしていない場合は次にmovie.webm形式のビデオファイルを試します。最後の行は、ブラウザが<video>タグをサポートしていない場合に表示される代替メッセージです。
<source> タグは、メディア要素内で複数使用することができ、type属性を使用してそれぞれのソースのMIMEタイプを指定します。これにより、ブラウザは最適なソースを選択できるようになります。
このようにして、<source> タグはブラウザが利用可能なメディアリソースを指定し、ユーザーにとって最適な形式のメディアを提供する役割を果たします。
source タグの基本的な使い方
source タグの基本的な構文と属性
「<source>」タグは主にHTML5のマルチメディア要素(<video> や <audio>)内で使用され、複数のメディアリソースを定義し、ブラウザが適切なものを選択して再生するのに使用されます。
以下は、画像や動画を指定する際の基本的なコード例です。
<!-- 動画の場合 -->
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
お使いのブラウザはビデオタグをサポートしていません。
</video>
<!-- 画像の場合 -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="代替テキスト">
</picture>これらの例では、<source> タグはそれぞれのメディアファイルや画像を指定し、ブラウザが最適なフォーマットを選択します。<source> タグは、MIMEタイプを指定する type 属性を持っており、ブラウザはその情報を使用して適切なリソースを選択します。
<source>タグは、異なるブラウザや環境に応じて適切なメディアリソースを提供するためのHTML要素といえます。
source タグの応用
メディアクエリやフォーマットタイプを指定して、レスポンシブ対応する方法
下の例は、ブラウザは最初にサポートされているフォーマットを探し、そのフォーマットのソースファイルを再生します。もしMP4形式がサポートされていれば、video.mp4 を再生します。もしサポートされていなければ、WebM形式のvideo.webm を再生し、その次にOgg形式の video.ogg を再生します。これにより、異なるブラウザでの再生が可能になります。
<!-- videoタグ内での応用例 -->
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
お使いのブラウザはビデオタグをサポートしていません。
</video>さまざまなデバイスや解像度に対応するための例
<source> タグはメディアクエリを使って特定の条件下で異なるメディアリソースを提供することもできます。例えば、デバイスの幅やピクセル密度に応じて異なる画像を提供することができます。
<picture>
<source media="(max-width: 600px)" srcset="image-small.jpg">
<source media="(min-width: 601px)" srcset="image-large.jpg">
<img src="image-default.jpg" alt="代替テキスト">
</picture>このコード例では、ブラウザは600px以下の幅の場合には image-small.jpg を表示し、それ以上の場合は image-large.jpg を表示します。これにより、異なる画像サイズを適切に表示することができます。
<source> タグを使用することで、異なるブラウザや環境に対応したメディアリソースの提供や、レスポンシブな画像表示などが可能になります。
フォールバックの確保
フォールバックとは、障害などが起きたときに代わりの方法に切り替えることを指します。
<source> タグは、HTML5でマルチメディアコンテンツを扱うために使用されます。通常、<video> や <audio> 要素の内部で使用され、異なるメディアフォーマットを提供してブラウザの互換性を向上させます。
例えば、動画を<video> 要素内で提供する場合、ブラウザによってサポートされている動画フォーマットは異なることがあります。このため、異なる形式の動画ファイルを同じ動画に提供することができます。これにより、ブラウザはその環境でサポートされている最適なフォーマットを選択して再生します。
<source> タグを使用してフォールバックを確保する方法は以下のようになります。
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>お使いのブラウザはHTML5ビデオをサポートしていません。</p>
</video>この例では、最初にMP4形式の動画を提供し、その次にWebM形式の動画を提供しています。もしブラウザがMP4をサポートしていない場合は、WebM形式の動画を提供します。また、ブラウザが両方の形式に対応していない場合は、<p> 要素内のメッセージが表示されます。
source タグのまとめ
<source> タグは、HTML5でマルチメディア要素（動画や音声）を指定する際に使用されます。このタグは、特定のメディア要素（例えば、<video> や <audio>）内で使用され、異なる形式のメディアファイルを指定するために役立ちます。ブラウザは対応している形式のファイルを再生できるように、指定したファイルのリストの中から最初に対応しているものを選択します。
主な用途としては、異なるブラウザとデバイスに対応するために、同じコンテンツを複数の形式で提供することが挙げられます。これは、特定のブラウザや特定の形式に対応していない場合でも、適切なメディアファイルを提供するために役立ちます。
適切にマークアップして情報を正確に読み取ってもらいましょう。