HTML Academy · 课时

用于多种格式的 source 元素

Q: 「用于多种格式的 source 元素」这节课中我会学到什么？

使用 source 元素提供备用格式 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 source 元素提供备用格式

用于多种格式的 source 元素 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

为什么需要多种格式

不同浏览器支持不同的音频和视频编解码器：

WebM（VP9/VP8） — Chrome、Firefox、Edge（不支持 Safari）
MP4（H.264） — 所有浏览器（通用格式）
OGG — Firefox、Chrome（不支持 Safari）
OPUS — Chrome、Firefox、Edge（不支持 Safari）

<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 中的来源元素

提供多种视频格式：

<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">

来源选择的工作方式

浏览器会按顺序评估来源元素：

读取第一个来源的 type
如果可以播放该类型，就下载并使用它
如果不能播放，就转到下一个来源
如果没有来源可用，就显示后备内容

请将最优先的格式放在最前面（例如，为了在 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>

音频格式建议

音频编解码器建议：

WebM 中的 OPUS — 质量与大小的比例最佳；适用于 Chrome、Firefox、Edge
MP4 中的 AAC — 通用格式；适用于 Safari、Chrome、Firefox、Edge
MP3 — 兼容性最广；作为最后的后备格式使用

使用来源集合实现响应式 video

对于视频，请在来源元素上使用 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

后备内容

始终在音频或 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>

快速检查

应该按什么顺序列出来源元素？

回顾：来源元素

来源元素要点：

在音频或 video 中使用 <source src type> 提供多种格式
浏览器会选择第一个匹配的来源
将最现代的格式放在第一位；使用 MP4/AAC 作为通用后备格式
在所有来源之后，将后备文本或链接放在音频或 video 内部
在来源元素上使用 media，根据视口选择视频

常见问题解答