VIDEO LESSON

HTMLのsourceタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二十四本目は、ソースタグです。
0:08ソースは単体で何かを表示するタグではなく、ピクチャー、オーディオ、ビデオといった親要素の中で、
0:13候補となるファイルを並べるためのタグです。
0:18ブラウザーは上から順に候補を確認し、自分が扱える形式や条件に合うものを選んで再生や表示を行います。
0:26今回は、親によって書き方が変わる点、記事の音声の例、ピクチャーでの使い方、
0:31注意すべき順番まで、初心者向けに順番に解説します。
0:36候補を並べるという考え方を押さえると、メディアの載せ方がぐっと理解しやすくなります。
0:42まず、どんな場面で使うかを整理しましょう。
0:46一つ目は、同じ音声や動画を、形式の違うファイルで複数用意したいときです。
0:52ブラウザーによって対応する形式が少しずつ違うため、候補を二つ並べておくと、
0:57再生できない人を減らせます。
1:01二つ目は、画面の幅によって見せる画像を変えたいときです。
1:06スマホでは縦長の画像、パソコンでは横長の画像、といった切り替えができます。
1:13三つ目は、新しい画像形式と従来の形式を一緒に書く場面です。
1:18対応ブラウザーには軽い新しい形式、未対応なら従来形式、という出し分けが可能になります。
1:26いずれも、利用者の環境に合わせて最適な一つを選ばせるのが目的です。
1:31基本の書き方です。
1:33ソースは空要素なので、終了タグは書きませんし、中に文字を入れることもありません。
1:38必ずピクチャー、オーディオ、ビデオのいずれかの子要素として置きます。
1:43大切なのは順番です。
1:45ブラウザーはソースを書かれた順に読み、上から順に、使えるかどうかを判定します。
1:50最初に合った候補が選ばれるため、優先したい候補ほど上に書くのが基本です。
1:55コード例の上段はビデオ、下段はピクチャーの例です。
1:59ピクチャーでは最後に必ずイメージ要素を置く決まりがある点も、ここで覚えておきましょう。
2:05ファイル自体は別途用意が必要で、タグを書くだけで自動で作られることはありません。
2:11記事の活用事例を見てみましょう。
2:13オーディオ要素の中に、ソースを二つ並べた例です。
2:17一つ目はウェブエム形式、二つ目はエムピースリー形式です。
2:22ブラウザーはまず上のウェブエムを再生できるか確認し、できなければ次のエムピースリーへ進みます。
2:29タイプ属性に形式を正しく書いておくと、ブラウザーはファイルを読み込む前に判定できるため、
2:34無駄な通信を減らせます。
2:38最後のリンクは、どちらの形式も再生できない環境向けの逃げ道です。
2:43候補を並べるだけでなく、最後までたどり着けない人への配慮まで含めて一つの設計だと考えると、
2:48実務でも応用しやすくなります。
2:53練習ファイルに写して再生確認をしてみましょう。
2:56ビデオでの使い方も、考え方は音声と全く同じです。
3:00ビデオ要素の中にソースを並べ、エスアールシーでファイルを指定し、タイプで動画の形式を示します。
3:07コード例ではウェブエムを先に、エムピーフォーを後に置いています。
3:11なお、再生ボタンのコントロール、サムネイル画像のポスター、字幕のトラックなどは、
3:16ソースではなく親のビデオ側の役割です。
3:20ソースの仕事はあくまで、どのファイルを使うかの候補提示に絞られます。
3:25役割分担をはっきりさせておくと、動画が再生できないときに、ファイル形式の問題か、
3:29設定の問題かを切り分けやすくなります。
3:33対応形式はブラウザーごとに異なるため、主要な候補を二つ用意するのが無難です。
3:39ピクチャーでの使い方は少しだけ変わります。
3:42ピクチャーの中では、エスアールシーではなく、エスアールシーセットという属性で画像候補を指定します。
3:49メディア属性で、画面幅などの条件を付けることもできます。
3:53コード例は画像形式で出し分ける例で、新しい形式から順に試し、最後のイメージ要素のジェイペグが、
3:58どれも使えない場合の受け皿になります。
4:03この最後のイメージ要素は省略できません。
4:06実際に表示されるのはイメージ要素であり、ソースはその画像の差し替え候補を伝える役割だと理解してください。
4:13オルト、つまり代替テキストもイメージ要素側に書きます。
4:17この親による使い分けが、このタグ最大のポイントです。
4:21ここで、最も間違えやすい使い分けを整理します。
4:25オーディオとビデオの中ではエスアールシーを使い、ピクチャーの中ではエスアールシーセットを使います。
4:33同じソースタグでも、親によって主役の属性が変わるのです。
4:37エスアールシーセットでは、ファイル名だけでなく、画像の幅を示す数字や解像度を併記して、
4:43複数の候補をカンマで並べることもできます。
4:48その際、サイズズ属性で、実際に表示されるおおよその幅を伝えると、ブラウザーがより適切な候補を選べます。
4:56親に合わない属性を書いても候補として扱われないことがあるため、書き始める前に、
5:01親がどれかを確認する癖を付けましょう。
5:06この確認一つで、多くの表示トラブルを防げます。
5:09主な属性を確認します。
5:11タイプはファイルの種類を示す属性で、拡張子だけでなく実際の形式と一致させる必要があります。
5:18メディアは、画面幅などの条件を指定し、その条件を満たすときだけ候補になる、
5:22という絞り込みに使います。
5:26幅と高さは、主にピクチャー側で画像候補の寸法を伝えるために使われ、読み込み前に場所を確保する助けになります。
5:35そのほかに、アイディー、クラス、ラング、データ属性といった共通属性も使えますが、
5:39ソースでは必須のものはありません。
5:44属性は多く付けることが目的ではないので、形式、条件、寸法という三つの観点から、
5:48必要なものだけを選んでください。
5:53同名の属性が別の要素では違う意味になる点にも注意しましょう。
5:58注意点と、よくある間違いを確認します。
6:01一つ目は、タイプ属性と実際のファイル形式の食い違いです。
6:05拡張子を変えただけのファイルを別形式として書いても、正しく再生されません。
6:11二つ目は候補の順番です。
6:13下に書いた候補は、上の候補が使える限り選ばれないため、軽い新形式など優先したいものほど上に置きます。
6:21三つ目は、受け皿の用意です。
6:24ピクチャーでは最後のイメージ要素を忘れずに、音声や動画では再生できない人向けのリンクや説明を置きましょう。
6:32四つ目はパスの間違いです。
6:34存在しないファイルへの指定は、候補がないのと同じ結果になります。
6:39公開前に、狭い画面と広い画面の両方で、意図したファイルが選ばれているか確認してください。
6:47ブラウザー互換性を確認します。
6:49記事が参照するエムディーエヌの記録では、ソース本体は、クロームが三以降、
6:55エッジが十二以降、ファイアフォックスが三・五以降、サファリが三・一以降で対応しています。
7:01とても古くから使える要素だと言えます。
7:04一方で属性ごとに差があり、エスアールシーセットとサイズズは、クローム三十八以降、
7:10サファリ九・一以降など、本体より新しい対応開始になっています。
7:16幅と高さも、クローム九十以降と比較的新しい属性です。
7:20また、要素が使えても、肝心の音声や画像の形式自体にブラウザーが対応していない場合があります。
7:27形式ごとの対応は別に確認し、実機でも試すことが大切です。
7:31最後に練習とまとめです。
7:33ソースは、ピクチャー、オーディオ、ビデオの中で、表示や再生の候補を提示する空要素でした。
7:40大切なポイントは三つです。
7:43一つ目は、オーディオとビデオではエスアールシー、ピクチャーではエスアールシーセットを使うこと。
7:50二つ目は、タイプで形式を正しく伝え、優先する候補から順に書くこと。
7:56三つ目は、どの候補も使えない人向けに、イメージ要素やリンクといった受け皿を用意することです。
8:03練習として、手元の音声や画像を二つの形式で用意し、ソースを二つ並べて、ブラウザーがどちらを選ぶか開発者ツールで確認してみてください。
8:14お疲れさまでした。
8:15次回もHTMLタグの解説を続けましょう。

この動画で学べること

sourceタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。picture・audio・video の候補ソース。親により srcset と src の使い分けが変わります。

解説記事・サンプルコードを読む：HTMLのsourceタグとは？属性・使い方・ブラウザー互換性と活用例 →