こんにちは。
HTML5を勉強していて、動画や音声の載せ方を検索しているとvideoタグやaudioタグがよく出てきますよね。
ですがたまにsourceタグというタグを見かけることもあると思います。
videoタグだけでも動画は載せられるのに、
sourceタグって意味あるの？
こんな悩みを抱いたことありませんか？
videoタグやaudioタグだけでも動画や音声ファイルを載せることは可能なのになぜsourceタグが必要になってくるのか？
今回は、sourceタグの
・基本的な使い方
・pictureタグ、videoタグ、audioタグとの組み合わせ方
を紹介します！
目次
sourceタグとは
sourceタグの読み方
sourceは「ソース」と読みます。
英語でsourceは「源」という意味ですが、HTMLではファイルの源、いわゆるソースファイルを指定するタグという意味になります。
sourceタグは代替ファイルを指定するタグ
sourceはその名の通りソースファイルを指定するタグなのですが、タグの定義としては若干異なります。
sourceタグは代替ファイルを指定するタグ
です。
動画や音声のソースファイルを指定するのであればvideoタグやaudioタグでも可能です。ですが一つのMIMEタイプの動画を指定したとして、そのMIMEタイプの動画をブラウザが対応していなかったらどうでしょう？
本来再生されるはずの動画が再生されなくなりますよね。
そこで、videoタグやaudioタグの内部にsourceタグを配置することにより、意図したMIMEタイプのファイルが再生されなかった場合の代替ファイルを指定することができます。
これによりブラウザによって再生されないといった不具合をなくすことができます。
sourceタグで利用できる属性
sourceタグは普通のタグと少し仕様が変わっており、親要素のタグによって使用できる属性が異なります。
大きく分けてsourceタグの親要素が「pictureタグ」か「videoタグ・audioタグ」の二つになります。
親要素がpictureタグの場合
| 属性 | 説明 |
|---|---|
| media | 画像の使用条件 |
| srcset | 候補画像 |
| sizes | 使用条件と画像の表示幅 |
| type | 組み込む画像の種類 |
親要素がvideoタグまたはaudioタグの場合
| 属性 | 説明 |
|---|---|
| src | データのアドレス |
| type | 組み込むデータの種類 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 87~ |
| Edge | 完全対応 |
| Firefox | 3.5~ |
| Internet Explorer | 9~ |
| Opera | 72~ |
| Safari | 14~ |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 81~ |
| Android版Chrome | 87~ |
| Android版Firefox | 83~ |
| Android 版 Opera | 非対応 |
| iOS版Safari | 14~ |
| Samsung Internet | 12~ |
sourceタグの基本的な使い方
先ほど説明した通り、sourceタグは親要素が「pictureタグ」か「videoタグ・audioタグ」によって指定可能な属性が変わります。今回はこれら二つのパターンごとにソースコードをみていきましょう。
pictureタグ内に使用した例
まずは写真などの静止画の挿入で使用されるpictureタグの子要素として使用した例です。
|
1 2 3 4 5 6 |
<picture> <source srcset="sample.webp" type="image/webp"> <source srcset="sample.heic" type="image/heic"> <source srcset="sample.bmp" type="image/bmp"> <img src="sample.png" alt=""> </picture> |
サンプルコードを読んでみると、まず1番上のsourceタグが読み込まれます。
すなわちsample.webpが読み込まれます。もしブラウザがwebpを表示できない場合、その次のsourceタグのsample.heic、これも表示できない場合はsample.bmpとなります。
そしてsourceタグに記載されたファイル全ての表示ができない場合やブラウザがそもそもsourceタグに対応していない場合は一番下のimgタグ内のsample.pngを表示します。
sourceタグに記載したファイル全てが同時に表示されるわけではありません！
sourceタグ、imgタグ含めその中で表示可能なファイルを一つだけ表示します。
videoタグ、audioタグ内に使用した例
続いて動画ファイルや音声ファイルを載せるvideoタグとaudioタグの子要素とした場合です。
|
1 2 3 4 5 6 7 8 9 |
<video controls autoplay muted> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogg"> </video> <audio controls autoplay muted> <source src="sample.mp3" type="audio/mp3"> <source src="sample.oga" type="audio/ogg"> </audio> |
こちらもファイルの再生のプロセスはpictureタグの場合と同じです。
videoタグのサンプルコードの場合、まず始めにsample.mp4を再生しようとします。ブラウザがMP4形式のファイルの再生ができなかった場合、その次のOGG形式のファイルの再生を試みます。
videoタグとaudioタグの内部にはtrackタグを入れることが可能ですが、sourceタグはそれらよりも前に配置する必要があります。
media属性を指定してレスポンシブな画像の切り替えを行う
sourceタグが本領を発揮すると言っても過言ではないシチュエーションが、pictureタグの子要素として持つ時でかつmedia属性を指定する時です。
media属性は画像の使用条件を指定できるのですが、「使用条件って何？」ってなりますよね。
media属性で指定できる値はメディアクエリになります。
レスポンシブデザインをコーディングする時に登場するメディアクエリですが、これをsourceタグで指定することにより、画像をPCの時は〇〇.jpg、スマホの時は△△.jpg、とレスポンシブに切り替えることができます。
サンプルコードをみていきましょう。
|
1 2 3 4 |
<picture> <source media="(max-width: 560px)" srcset="sp.jpg"> <img src="pc.jpg" alt=""> </picture> |
これはビューポートの横幅が560px以下の時にはsp.jpgが表示され、それ以外の幅の時はpc.jpgが表示されるコードになります。
また、sourceタグが対応していないブラウザで開く場合はビューポートの横幅関係なくpc.jpgが表示されます。
このように、media属性を指定することでレスポンシブデザインに対応した画像の切り替え処理を行うことができます。
まとめ
いかがでしたか？
今回はsourceタグの基本的な使い方からmedia属性を指定したレスポンシブな画像の切り替えの方法を紹介しました。
sourceタグは普通のタグと違い、pictureタグの子要素になる場合とvideoタグ、audioタグの子要素になる場合とで指定できる属性が異なるちょっと特殊なタグになります。
この違いを覚えて適切に使えるようにしましょう！
参考文献：http://www.htmq.com/html5/source.shtml
