sourceタグの使い方と複数のメディアファイルを適切に指定する方法をわかりやすく解説

INDEX

sourceの概要

複数のメディアファイルを指定する HTMLタグ

<source src=”ファイルURL” type=”MIMEタイプ”>

概要 sourceタグは、videoタグやaudioタグの中で使用され、異なるフォーマットのメディアファイルを指定するためのタグです。ブラウザは対応するフォーマットのファイルを自動的に選択します。

属性	説明	使用例
`src`	メディアファイルのURLを指定	`<source src="video.mp4">`
`type`	メディアのMIMEタイプを指定	`<source src="video.mp4" type="video/mp4">`
`media`	メディアクエリを指定し、特定の条件で適用	`<source src="video-mobile.mp4" media="(max-width: 600px)">`

以下の例では、sourceタグを使って異なるフォーマットの動画ファイルを指定しています。

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <p>このブラウザでは動画を再生できません。</p>
</video>

Q: sourceタグは単体で使用できますか？: A: いいえ、sourceタグは必ずvideoタグやaudioタグの中で使用する必要があります。
Q: すべてのブラウザで同じフォーマットが再生できますか？: A: いいえ、ブラウザごとに対応するフォーマットが異なるため、MP4（H.264）、WebM、Oggなど複数の形式を指定するのが望ましいです。
Q: sourceタグのmedia属性は何のために使いますか？: A: メディアクエリを指定して、特定のデバイスや画面サイズに適したメディアを提供するために使用します。
Q: すべての動画に複数のフォーマットを指定する必要がありますか？: A: 可能ならば指定するのが望ましいですが、MP4（H.264）はほとんどのブラウザで再生可能です。
Q: ブラウザで動画や音声が再生されない場合の対策は？: A: <p>タグで代替テキストを記述し、ユーザーに適切な案内を提供するとよいでしょう。