canPlayType()方法用于检测浏览器对指定MIME类型及编码格式的支持程度,返回“probably”“maybe”或空字符串;仅“probably”表示可靠支持,需配合多回退策略使用。

可以使用 HTMLMediaElement.canPlayType() 方法来判断浏览器是否原生支持某种视频编码格式。这个方法由 <video></video> 元素(或 <audio></audio>)提供,返回一个字符串,表示浏览器对指定 MIME 类型 + 编码参数的兼容程度。
基本用法:传入标准格式的 MIME 字符串
调用方式:videoElement.canPlayType(type),其中 type 是形如 "video/mp4; codecs="avc1.42E01E"" 的字符串。注意:
- MIME 类型必须正确(如
video/mp4、video/webm、video/ogg) -
codecs参数需符合规范写法(如 H.264 写avc1.xxxxxx,VP9 写vp9,AV1 写av01.0.05M.08) - 引号必须是英文双引号,且整体用单引号或转义包裹(避免 JS 解析错误)
返回值含义要准确理解
canPlayType() 返回三种可能字符串:
- "probably":浏览器认为该格式很可能会播放成功(有解码器且配置匹配)
- "maybe":浏览器无法确定,可能能播(例如只检查了容器类型,未验证编码细节)
- ""(空字符串):明确不支持(解析失败、缺少解码器、参数非法等)
⚠️ 注意:"maybe" 不代表可用,生产环境建议只把 "probably" 当作“可靠支持”依据。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“Java免费学习笔记(深入)”;
常用编码格式检测示例
可直接在控制台或脚本中运行:
const video = document.createElement('video');
// 检测 H.264(常见于 MP4)
console.log(video.canPlayType('video/mp4; codecs="avc1.42E01E"')); // "probably"
// 检测 VP9(常见于 WebM)
console.log(video.canPlayType('video/webm; codecs="vp9"')); // "probably" 或 ""
// 检测 AV1(较新,需现代浏览器)
console.log(video.canPlayType('video/mp4; codecs="av01.0.05M.08"')); // Chrome/Firefox 110+ 可能返回 "probably"
// 检测 HEVC(H.265,MP4 容器,支持度有限且常需授权)
console.log(video.canPlayType('video/mp4; codecs="hvc1.1.2.L120.90"')); // Safari macOS/iOS 常返回 "probably"
实用建议与注意事项
实际项目中要注意:
- 不要仅依赖单一格式检测结果,建议按优先级提供多个
<source></source>,让浏览器自主选择 - 移动端 iOS Safari 对 HEVC 支持较好,但 Android 厂商适配差异大;AV1 在 Chrome 和 Firefox 中逐步完善,但 Safari 目前不支持
- 动态生成
codecs字符串时,确保大小写和点号位置准确(如avc1不是AVC1,av01不是av1) - 若需精确到 profile/level(如 H.264 的 baseline/main/high),可查标准编码字符串表,但多数场景用通用值(如
avc1.42E01E)已足够


















