HTML视频source标签type属性怎么配置才能支持最新的AV1编码格式-html教程-PHP中文网

av1 的 type 属性必须完整包含 mime 类型和 codecs 参数，缺一不可；仅写 video/mp4 或 video/webm 无效，需如 type="video/mp4; codecs=\"av01.0.05m.08\""，且服务器 content-type 响应头须逐字符匹配。

html视频source标签type属性怎么配置才能支持最新的av1编码格式

只写 type="video/mp4" 或 type="video/webm" 对 AV1 完全无效——浏览器根本不会识别编码能力，只会当普通 MP4/WebM 处理，而绝大多数 AV1 文件实际无法解码。真正起作用的是带标准 codecs 字符串的完整声明。

type="video/mp4; codecs="av01.0.05M.08""：MP4 容器 + AV1 Main Profile Level 5.1，Chrome/Firefox/Edge 主流支持，Safari 16+ 开始识别（需 macOS Ventura 或 iOS 16.4+）
type="video/webm; codecs="av1""：WebM 容器 + AV1 基础 profile，兼容性略宽，但 Safari 16.4+ 才开始支持；注意大小写敏感，AV1 或 av1.0.05M.08（带版本号）在部分旧版中可能返回空字符串
别写 codecs="av1.0.05M.08" 而不带引号包裹整个 type 值——HTML 解析会失败；也别漏掉分号和空格：video/mp4;codecs="av01.0.05M.08"（少空格）会被 Safari 当作不匹配

浏览器只取第一个 <source></source> 中 type 匹配且实际能解码的，不会“比较哪个更好”。AV1 虽新，但不能放第一位，否则 iOS Safari 16.3 及更早版本会直接跳过整个 <video></video>，连请求都不发，表现为黑屏静音。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

推荐顺序：<source src="vid-av1.mp4" type="video/mp4; codecs=" av01.0.05m.08></source> → <source src="vid-vp9.webm" type="video/webm; codecs=" vp9 opus></source> → <source src="vid-h264.mp4" type="video/mp4; codecs=" avc1.42e01e mp4a.40.2></source>
AV1 必须放在 VP9 之后、H.264 之前——既避开 Safari 早期版本的硬性拦截，又让现代浏览器优先用 AV1
如果把 AV1 放首位且目标用户含大量 iOS 15 设备，大概率整段视频不可用，error 事件都不触发，DevTools Network 面板里甚至看不到请求

哪怕 type 写对了，如果服务器返回的 Content-Type 响应头不匹配，Safari 就会静默忽略该 <source></source>。这不是前端能绕过的校验，是 WebKit 强制行为。

MP4 文件必须返回 Content-Type: video/mp4; codecs="av01.0.05M.08"（注意：包含 codecs 参数，且引号、空格、逗号位置完全一致）
WebM 文件对应返回 Content-Type: video/webm; codecs="av1"，不能是 video/webm 或 application/octet-stream
用 curl -I 检查响应头：curl -I https://example.com/vid-av1.mp4，确认 header 值与 HTML 中 type 完全相同
本地开发时 file:// 协议下 type 匹配逻辑失效，务必走 http:// 或 https:// 测试

video.canPlayType('video/mp4; codecs="av01.0.05M.08"') 返回 "probably" 并不代表视频一定能播——它只说明浏览器注册了解码器，不保证文件可解码、网络可用、或权限满足（比如 iOS 上还需 muted + 用户手势）。

返回 ""（空字符串）：明确不支持，可直接跳过该 source
返回 "maybe"：大概率不可用，常见于只传 "video/mp4" 或 codecs 字符串不规范
即使返回 "probably"，仍需监听 loadedmetadata 或 canplay 事件确认元数据加载成功；否则可能卡在 loading 状态
国产安卓浏览器（如华为、小米）常在 4G 下拦截 AV1 流，需结合 error 事件 + networkState 判断是否触发 MEDIA_ERR_DECODE