HTML 媒体源元素 source 详解

source元素：为video/audio/picture提供多源备选、type指定MIME类型+codec、media媒体查询选择不同源、srcset分辨率选择、浏览器自动选择第一个支持的格式 · 难度：入门 · +10XP

HTML source 元素 —— 给媒体提供多种选择

source 是一个幕后英雄标签——它自己不显示任何东西，但能让 video、audio、picture 拥有多种备选格式。

视频的多格式支持

<video controls width="640">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  你的浏览器不支持HTML视频。
</video>

浏览器从上到下尝试，选择第一个支持的格式。MP4放最后做兜底。

常用媒体类型

动手练习

1. 基础练习：准备MP4和WebM两种格式视频，用source提供双格式支持。
2. 进阶应用：用source的media属性在不同屏幕尺寸下加载不同分辨率的视频。
3. 项目实战：做一个视频播放页面——支持字幕和多分辨率切换。