HTML Academy · レッスン

複数形式に対応するsource要素

Q: 「複数形式に対応するsource要素」で何を学びますか？

source要素で代替形式を提供します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

source要素で代替形式を提供します

「複数形式に対応するsource要素」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

複数の形式を使う理由

ブラウザーによって対応している音声・動画コーデックが異なります。

WebM (VP9/VP8) — Chrome、Firefox、Edge（Safariを除く）
MP4 (H.264) — すべてのブラウザー（ universal）
OGG — Firefox、Chrome（Safariを除く）
OPUS — Chrome、Firefox、Edge（Safariを除く）

<source>要素を使うと、フォールバック用に複数の形式を指定できます。

audio内のsource

複数の音声形式を指定します。

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

video内のsource

複数の動画形式を指定します。

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

sourceのtype属性

type属性は、MIMEタイプとコーデックをブラウザーに知らせます。

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

sourceの選択の仕組み

ブラウザーはsource要素を順番に評価します。

最初のsourceのtypeを読み取ります
そのタイプを再生できる場合は、ダウンロードして使用します
再生できない場合は、次のsourceに進みます
どのsourceも使用できない場合は、フォールバックコンテンツを表示します

最も優先する形式を先頭に置きます（たとえば、ChromeやFirefoxでのパフォーマンスを重視する場合はWebM）。

sourceのmedia属性

media属性を使うと、ビューポートに応じて異なる形式を配信できます。

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

推奨する形式の順序

互換性とパフォーマンスを最大限に高めるsourceの最適な順序：

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

音声形式の推奨事項

音声コーデックの推奨事項：

WebMのOPUS — 品質とサイズの比率が最適。Chrome、Firefox、Edgeに対応
MP4のAAC — 汎用的。Safari、Chrome、Firefox、Edgeに対応
MP3 — 最も幅広く互換性があるため、最後のフォールバックとして使用します

srcsetによるレスポンシブ動画

動画では、帯域幅に応じて切り替えるためにsourceのmediaを使用します。

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

canPlayTypeの確認

JavaScriptでブラウザーのコーデック対応をテストします。

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

フォールバックコンテンツ

audio/video内には、必ずフォールバックコンテンツを含めます。

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

クイックチェック

source要素はどのような順序で記述すべきですか。

まとめ：source要素

source要素の必須事項：

audio/video内の<source src type>で形式の候補を指定します
ブラウザーは最初に一致するsourceを選択します
最新の形式を先頭に置き、MP4/AACを汎用的なフォールバックにします
すべてのsourceの後に、audio/video内へフォールバック用のテキストまたはリンクを含めます
ビューポートに基づいて動画を選択するには、sourceでmediaを使用します

よくある質問

「複数形式に対応するsource要素」レッスンは無料ですか？

はい。「複数形式に対応するsource要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「複数形式に対応するsource要素」で何を学びますか？

source要素で代替形式を提供しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「複数形式に対応するsource要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る