canplaytype() 返回"probably"不等于真能播放h.265或av1,仅表示浏览器声明支持,需通过创建video元素、加载测试文件并监听loadedmetadata/error事件实测验证,再结合ua和fallback策略保障兼容性。

不能靠 canPlayType() 返回 "probably" 就认定浏览器真能播 H.265(HEVC)或 AV1,它只查浏览器注册表里有没有对应解码器声明,不验证实际能否解码。结果只是推测,不是运行时保障。
canPlayType() 的返回值含义要清楚
传入带完整 codecs 参数的 MIME 字符串后,返回值只有三种可能:
-
""(空字符串):浏览器明确不支持该编码组合,比如在旧版 Firefox 中检测
"av01.0.05M.08"; -
"probably":容器和编码都匹配已知稳定支持的组合,例如 Safari 对
"hev1.1.6.L93.B0"常返回这个,但 Android 厂商定制浏览器可能“伪支持”; -
"maybe":参数不全,比如只写
"video/mp4"没带 codecs,或大小写/空格不规范("hev1"和"HEV1"可能结果不同)。
写对 codecs 字符串是前提
不同编码有约定写法,错一个字符就可能返回空:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
H.265 / HEVC:推荐用
"hev1.1.6.L93.B0"或"hvc1.1.2.L153.B0"(profile、level、tier 要合理,避免过高); -
AV1:标准写法是
"av01.0.05M.08"(表示 Main profile、level 5.1、8-bit),注意是数字0不是字母O; - 引号必须存在,且是英文双引号;codecs 参数内不能有多余空格,大小写敏感。
仅靠 canPlayType() 不够,必须实测加载
尤其对 H.265,很多设备(如部分 Android 手机、国产浏览器)会返回 "probably" 却在播放时失败。稳妥做法是:
- 创建隐藏
<video></video>元素,设置preload="metadata"; - 指定一个极短、参数规范的测试文件(如 480p、baseline profile、无 B-frame 的 HEVC MP4);
- 监听
loadedmetadata(成功)或error(失败)事件; - 结合 UA 和 platform 做粗筛:iOS Safari 16.4+ 可信度高,Firefox 当前仍不支持 HEVC,可直接跳过检测。
生产环境别单靠检测,要用 fallback 策略
用户真实体验取决于能否播出来,不是能不能“识别”。所以:
- 在
<video></video>中按优先级列多个<source></source>,例如先 AV1,再 HEVC,最后 H.264; - 服务端可配合 JS 探测结果动态下发资源,避免客户端反复加载失败;
- 对关键场景(如 Cesium 视频融合),低版本 Chrome 或国产浏览器兼容模式下,HEVC 必须降级为 H.264,否则黑屏无报错。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










