【HTML Living Standard】source要素の使い方
source要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
sourceオブジェクトは、picture、audio、videoといったメディア要素に対して、一つまたは複数の代替メディアリソース（画像、音声、動画ファイル）を指定するオブジェクトです。このオブジェクトの主な目的は、ウェブブラウザや利用デバイスの特性（画面解像度、ネットワーク帯域幅、対応フォーマットなど）に応じて、最適なメディアファイルを柔軟に提供することにあります。
具体的には、picture要素内で使用することで、画面サイズやピクセル密度に応じて異なる解像度の画像を効率的に表示できます。また、audioやvideo要素内で複数のファイル形式（例: MP4, WebM, Ogg）を提供することにより、様々なブラウザが対応する形式を自動的に選択し、メディアの再生互換性を高めることが可能です。これにより、特定のブラウザや環境に依存せず、幅広いユーザーにコンテンツを提供できるようになります。
主要な属性としては、メディアリソースのURIを指定するsrc（audioやvideoの場合）や、レスポンシブな画像セットを定義するsrcset（pictureの場合）があります。さらに、メディアタイプを示すtype属性や、適用されるメディアクエリを定義するmedia属性、画像のサイズ情報を提供するsizes属性なども活用されます。これらの属性を適切に組み合わせることで、ウェブサイトの読み込みパフォーマンスを向上させ、ユーザーエクスペリエンスを最適化できます。
複数のsourceオブジェクトを定義することは、古いブラウザへのフォールバック対応や、ネットワーク速度が遅いユーザーへの配慮に繋がり、より堅牢でアクセスしやすいウェブコンテンツの提供に大きく貢献します。これにより、すべてのユーザーが自身の環境に合わせた最適な状態でメディアコンテンツを閲覧・視聴できるようになります。
構文(syntax)
1<source src="メディアファイルのURL" type="MIMEタイプ">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML sourceタグで複数ビデオソースを提供する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML sourceタグのサンプル</title> 7</head> 8<body> 9 10 <!-- 11 <video>要素内で<source>タグを使用し、異なるフォーマットのビデオソースを提供します。 12 ブラウザはリストの先頭から順に再生可能なソースを探し、最初に見つけたものを再生します。 13 これにより、異なるブラウザやデバイスで互換性のあるビデオを提供できます。 14 「controls」属性は、ビデオの再生/一時停止、音量調節などのコントロールを表示します。 15 --> 16 <video controls width="640" height="360"> 17 <!-- WebMフォーマットのビデオソース。Chrome, Firefox, Operaなどで推奨されます。 --> 18 <source src="sample.webm" type="video/webm"> 19 <!-- MP4フォーマットのビデオソース。Safari, Edge, Internet Explorerなどで広くサポートされます。 --> 20 <source src="sample.mp4" type="video/mp4"> 21 <!-- Ogg Theoraフォーマットのビデオソース。古いFirefoxやOperaなどでサポートされます。 --> 22 <source src="sample.ogv" type="video/ogg"> 23 <!-- 24 上記のどのフォーマットもサポートされない場合の代替コンテンツです。 25 このテキストは、<video>タグをサポートしていないブラウザで表示されます。 26 --> 27 お使いのブラウザはビデオタグをサポートしていません。 28 </video> 29 30</body> 31</html>
HTMLの<source>タグは、主に<video>や<audio>といったメディア要素内で、表示または再生するメディアファイルの情報を指定するために用いられます。このタグは単独では機能せず、常に親となるメディア要素の子要素として使用されます。
<source>タグの主な役割は、異なる形式（フォーマット）のメディアファイルを複数提供し、様々なWebブラウザやデバイスでの互換性を確保することです。例えば、WebM形式に対応するブラウザとMP4形式に対応するブラウザが存在する場合、複数の<source>タグを使ってそれぞれの形式のファイルを用意することで、ユーザーのブラウザが対応する最適なファイルを自動的に選択して再生できるようになります。ブラウザは<source>タグが記述された順番にファイルを検証し、最初に再生可能なファイルを見つけるとそのファイルをロードします。
<source>タグには、メディアファイルの場所を示すsrc属性と、そのファイルの形式（MIMEタイプ）を示すtype属性が重要です。これらにより、ブラウザは効率的に適切なメディアを判断し、表示します。このタグはHTMLの要素であり、プログラミング言語における「引数」や「戻り値」といった概念は持ちません。その代わりに、属性を通じてその動作や内容が定義されます。これにより、システムエンジニアは多様な環境で安定したメディアコンテンツをユーザーに提供できます。
sourceタグは、videoやaudio要素の子要素として必須であり、単独では機能しません。複数のメディアソースを提供することでブラウザの互換性を高めますが、ブラウザは記述順に再生可能なものを探します。そのため、より多くの環境で対応する汎用フォーマットを上位に配置しましょう。type属性には正確なMIMEタイプを指定し、不要なダウンロードを防ぐことが重要です。また、全てのソースが非対応の場合に備え、video要素の最後に代替コンテンツを記述し、src属性のファイルパスも必ず正確に確認してください。
HTML source 要素で動画ソースを指定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML source 要素のサンプル</title> 7</head> 8<body> 9 <!-- 10 source要素は、video要素やaudio要素の子要素として使用され、 11 メディアファイルのソース（URL）と形式（MIMEタイプ）を指定します。 12 ブラウザは、リストされたsource要素の中から、再生可能な最適なものを選択して使用します。 13 この例では、動画ファイルを表示するビューア（video要素）を作成しています。 14 --> 15 <video controls width="640" height="360"> 16 <!-- WebM形式の動画ファイル。ブラウザは優先的にこのファイルを読み込もうとします。 --> 17 <source src="sample-video.webm" type="video/webm"> 18 <!-- MP4形式の動画ファイル。WebMがサポートされない場合、ブラウザはこのファイルを試します。 --> 19 <source src="sample-video.mp4" type="video/mp4"> 20 <!-- 21 どちらのsource要素もサポートされない場合や、ファイルが見つからない場合に表示されるテキスト。 22 これは、video要素のフォールバックコンテンツとして機能します。 23 --> 24 お使いのブラウザは動画の再生に対応していません。 25 </video> 26 27 <!-- 注意: 上記のコードを実行するには、'sample-video.webm' と 'sample-video.mp4' という名前の動画ファイルを、 28 このHTMLファイルと同じディレクトリに配置するか、適切なパスを指定する必要があります。 --> 29</body> 30</html>
HTMLのsource要素は、動画（<video>）や音声（<audio>）といったメディアコンテンツを表示・再生する際に、その元となるファイルを指定するために使われます。これらのメディア要素の子要素として配置され、一つまたは複数のメディアファイルのパスとその種類（MIMEタイプ）をブラウザに伝えます。この要素自体は特定の引数を受け取らず、値を返す戻り値もありません。
提供されたサンプルコードでは、動画を表示する<video>要素の中に二つの<source>要素が記述されています。一つ目の<source>要素はWebM形式の動画ファイル（sample-video.webm）を、二つ目はMP4形式の動画ファイル（sample-video.mp4）を指定しています。ブラウザは、リストされた<source>要素の中から、自身がサポートしており、最も適した形式のメディアファイルを自動的に選択し読み込みます。これにより、様々なブラウザやデバイスで動画の再生互換性を高めることができます。もし、どの<source>要素もサポートされなかったり、指定されたファイルが見つからなかったりする場合には、<source>要素の後に記述された「お使いのブラウザは動画の再生に対応していません。」というテキストがユーザーに表示されます。
source要素は、videoやaudio要素の子要素としてのみ機能します。複数のsource要素を異なるメディア形式で指定することで、ブラウザが再生可能な最適なファイルを選択し、幅広い環境での互換性を確保できます。src属性でメディアファイルの正しいパスを、type属性でMIMEタイプを正確に記述することが重要です。特にtype属性は、ブラウザが事前に再生可否を判断するために使われます。サンプルコードを試す際は、指定された動画ファイルが実際に存在し、HTMLファイルと同じディレクトリに配置されているか、または正しい相対パスが指定されていることを必ず確認してください。また、video要素の直下に記述されたテキストは、どのsourceも再生できない場合の代替コンテンツとして利用者に重要な情報を提供します。