source 多格式兼容

不同浏览器支持的音视频格式不同，<source> 就是为此设计的"候选清单"机制：在一个 audio/video 里放多个 source，浏览器从上到下逐个检查，选用第一个自己支持的格式，后面的全部忽略。

两个影响成败的细节：一是 type 属性必须写对（如 video/mp4），浏览器靠它判断是否支持，不用真的下载文件试播，省流量也快；二是排序策略——把兼容性最好、体积最优的格式放前面，"第一个匹配即停止"意味着顺序就是优先级。

source 还有一个用途是配合 picture 元素做响应式图片：按屏幕宽度/media 条件选不同图片，机制与音视频一致。所有 source 都不支持时，标签内的文字内容会显示出来，这是给用户的最后提示。

本节要点多 source = 格式候选清单，浏览器选第一个支持的；type 属性帮助浏览器免下载判断支持性；顺序即优先级；兜底文字写在标签内容里。

HTML

<!-- 视频：浏览器从上往下找第一个支持的格式 -->
<video controls width="640">
  <source src="movie.webm" type="video/webm">  <!-- 体积小，优先 -->
  <source src="movie.mp4"  type="video/mp4">   <!-- 兼容性兜底 -->
  当前浏览器不支持 HTML5 视频。          <!-- 全部失败时的文字 -->
</video>

<!-- picture：source 的姊妹用法，按条件选图片 -->
<picture>
  <source media="(min-width: 800px)" srcset="big.jpg">
  <source media="(min-width: 400px)" srcset="mid.jpg">
  <img src="small.jpg" alt="响应式图片兜底">
</picture>

🔗 相关词条浏览器优先级兼容性标签元素

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读