HTML中Source标签在不同浏览器视频格式兼容中的排列顺序-html教程-PHP中文网

ios safari强制首个必须为h.264 mp4，否则静音、禁自动播放或抛notallowederror；原因在于webkit内核硬性限制，且需type、content-type、实际编码三者严格匹配。

html中source标签在不同浏览器视频格式兼容中的排列顺序

为什么第一个必须是 H.264 MP4

iOS Safari（含所有 WebKit WebView）强制要求首个可解码的 <source></source> 必须是 H.264 编码的 MP4，否则可能静音、禁自动播放，甚至抛 NotAllowedError。这不是兼容性“建议”，而是硬性行为限制。

常见错误现象：

把 <source src="vid.webm" type="video/webm"></source> 放第一位 → Safari 用户看到空白控件，不请求后续 source
MP4 文件实际是 AV1 编码，却只写 type="video/mp4" → Safari 认为“格式支持”，加载后解码失败，卡在 loading 状态

正确做法：

首位必须是 <source src="vid-h264.mp4" type="video/mp4; codecs=" avc1.42e01e mp4a.40.2></source>
用 ffprobe vid-h264.mp4 验证实际编码：确保 codec_name=hevc 或 av1 不出现在输出里
导出时加 FFmpeg 参数：-profile:v baseline -level 3.0 -c:a aac -b:a 128k

WebM 和 AV1 的 type 写法不能省略 codecs

只写 type="video/webm" 或 type="video/mp4" 是无效的——浏览器无法提前判断是否支持具体编码，会触发一次无意义请求，且 Network 面板里看不出失败原因。

必须显式声明 codecs，且值要和实际流严格匹配：

H.264 + AAC：type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""（注意大小写和空格）
VP9 + Opus：type="video/webm; codecs="vp9, opus""（Safari 16.4+ 开始支持）
AV1 + AV1-AAC：type="video/mp4; codecs="av01.0.05M.08""（仅 Chrome 109+、Firefox 110+、Safari 16+ 支持）

服务器返回的 Content-Type 响应头也必须逐字符一致，比如 video/webm; codecs="vp9, opus" 对应的响应头必须是 Content-Type: video/webm，不能是 text/plain 或 application/octet-stream。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

本地 file:// 协议下所有都静默失效

用双击 HTML 文件方式打开页面时，<source></source> 的 type 匹配逻辑完全不触发——浏览器直接跳过所有 source，哪怕你写了十个，也一个都不试。

这不是 bug，是安全策略：file:// 协议下，浏览器无法可靠获取 Content-Type 响应头，因此放弃 type 判断，只尝试 <video></video> 自身的 src（如果存在）或报错。

验证和调试必须走 HTTP(S)：

用 npx serve、python3 -m http.server 或本地开发服务器启动
检查 DevTools Network 面板：只看到一个视频请求？说明第一个 <source></source> 被接受；一个都没出现？大概率是 file:// 协议或 <video></video> 自带了 src 属性
别依赖文件后缀：一个 .mp4 文件若封装了 AV1 流，type="video/mp4" 就不会被 Safari 识别

不能和

一旦 <video></video> 标签自身写了 src 属性，所有嵌套的 <source></source> 都会被忽略——这是 HTML 规范行为，不是兼容性问题。

两种模式互斥：

单源模式：<video src="single.mp4"></video> —— 简单，但无 fallback
多源模式：<video><source src="h264.mp4" type="..."><source src="vp9.webm" type="..."></source></source></video> —— 必须清空 <video></video> 的 src

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