Chrome不播放video标签的主因是静音自动播放被拦截、跨域资源被拒、编码格式不支持或缺少必要属性；需同时设autoplay和muted才能自动播放，且推荐用H.264编码、本地HTTP服务及用户手势触发play()。

Chrome 不播放 <video></video> 标签的常见原因

Chrome 对视频播放有较严格的策略限制，不是写上 <video src="xxx.mp4"></video> 就能自动播。最常遇到的是：静音自动播放被拦截、跨域资源被拒、编码格式不支持、或缺少必要属性。

autoplay 和 muted 必须同时存在才能自动播放

Chrome 从 66 版本起默认禁止有声音的自动播放。哪怕视频本身没声音，只要没显式声明 muted，autoplay 就会被静默忽略。

• autoplay 单独写 = 不生效
• autoplay muted = 可触发自动播放（即使视频实际有音轨）
• 如果真需要带声播放，必须由用户手势（如点击）触发 play()，且不能在异步回调里调用（比如 setTimeout 或 fetch 完成后）

示例正确写法：

<video autoplay muted loop src="demo.mp4"></video>

检查视频格式和编解码器是否被 Chrome 支持

Chrome 原生支持 MP4（但仅限 H.264 + AAC）、WebM（VP8/VP9 + Vorbis/Opus），不支持 AV1 的旧版 Chrome（v85 之前）、也不支持纯 MOV 或未转码的 HEVC。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 用 ffprobe demo.mp4 查编码：Stream #0:0: Video: h264 (High) ✅；hevc (Main) ❌（除非是 Chrome v85+ 且启用了 flag）
• 本地文件用 file:// 协议打开时，Chrome 会禁用 autoplay 且可能拒绝加载媒体——改用 http-server 或 python3 -m http.server 起个本地服务再测
• 跨域视频（比如 CDN 上的 mp4）必须返回 Access-Control-Allow-Origin: *，否则 play() 会抛 DOMException: The element has no supported sources

JavaScript 调用 play() 失败的典型报错和修复

控制台出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first，说明触发时机违规。

• 确保 play() 在用户事件回调中直接调用（如 button.addEventListener('click', () => video.play())）
• 避免链式异步：❌ fetch('/video.mp4').then(() => video.play())；✅ 先绑定 click，再 fetch，最后在 click 回调里 play()
• 捕获 Promise 拒绝：video.play().catch(e => console.error('Play failed:', e))，否则错误静默，难排查

注意：有些视频元数据未加载完就调 play() 也会失败，可监听 canplay 或 loadedmetadata 事件后再播。

Chrome 的视频策略细节多，尤其在自动播放和跨域场景下，很容易以为代码写对了，其实是策略卡住了。最稳妥的做法是：本地起服务、加 muted、用 H.264 编码、所有 play() 绑定到用户点击。其他路径，基本都在填坑。