HTML source标签在多媒体中的作用？兼容性播放方案解析-html教程-PHP中文网

标签仅提供备选资源，浏览器按顺序选用首个能解码成功的；失效主因是type与content-type逐字符不一致、本地file://协议禁用匹配、video中media属性无效；ios safari要求首位source必须为h.264 mp4。

html source标签在多媒体中的作用？兼容性播放方案解析

<source></source> 标签本身不播放、不渲染、不触发加载，它只是告诉浏览器“我这里有几个备选资源”，最终播哪个，由浏览器按顺序挑第一个能用的——不是你认为最优的，而是它第一个能解码成功的。

常见失效不是代码写错了，而是三处没对齐：

type 属性值必须和服务器返回的 Content-Type 响应头**逐字符一致**，比如 audio/mpeg 写成 audio/mp3，Safari 就直接跳过
文件后缀 ≠ 格式，一个 .mp4 文件如果封装了 AV1 视频流，type="video/mp4" 仍可能被忽略，得加 codecs：如 type="video/mp4; codecs="av1""
本地用 file:// 协议打开时，所有 <source></source> 都静默失效——必须走 HTTP(S) 服务才能触发 type 匹配逻辑

别混用经验：

Pliny

Pliny是一款把提示词封装成可分享 AI 小应用的低代码工具。

下载

在 <video></video> 里，media 属性基本被所有浏览器忽略（Chrome/Firefox/Safari/Edge），写了也白写；真正起效的只有 type + DOM 顺序
在 <picture></picture> 里，media 是核心，它配合 srcset 和 sizes 才能做响应式图片切换；但注意 sizes 必须写在 <img> 上，不能放 <source></source> 里
<video></video> 中的 <source></source> 不支持 srcset，想适配不同分辨率？得上 HLS/DASH 或 JS 动态换 src

iOS Safari 强制要求首个 <source></source> 必须是 H.264 编码的 MP4（type="video/mp4"），否则可能静音、禁止自动播放，甚至抛 NotAllowedError。所以顺序必须是：

第一项：<source src="vid-h264.mp4" type="video/mp4"></source>（H.264，AVC1 编码）
第二项：<source src="vid-vp9.webm" type="video/webm; codecs=" vp9></source>
第三项（可选）：<source src="vid-av1.mp4" type="video/mp4; codecs=" av1></source>（仅 Safari 16+、Chrome 109+ 支持）

把 WebM 放第一位，Safari 用户就只能看到空白控件——它不会 fallback 到第二个，而是直接放弃整个 <video></video>。

最容易被忽略的一点：浏览器判断“能用”，要同时满足三个条件——type 匹配、HTTP 返回 200、视频帧真能解码。缺一不可。Network 面板里看到请求成功，不代表就能播；得进 Media 面板看解码器是否初始化成功。