HTML5 标签无法播放的三大主因是路径错误、格式不兼容（仅支持MP4/H.264+ACC、WebM、Ogg）、属性缺失或冲突；需检查控制台报错、用ffprobe验证编码、起本地服务、确保controls/autoplay/muted/playsinline等属性正确设置，并注意CSS隐藏和跨域/MIME问题。
html5 原生 <video></video> 标签就能播视频，不用额外库、不依赖 flash，但直接写上就跑不起来是常态——关键在路径、格式、属性三处卡点。
为什么 <video></video> 标签放了却没画面？
最常见是资源加载失败：浏览器不支持你用的视频编码格式，或路径不对导致 404。Chrome 和 Firefox 默认只支持 MP4（H.264 + AAC）、WebM（VP8/VP9 + Vorbis/Opus）、Ogg（Theora + Vorbis） 这三类，其他如 MOV、AVI、MKV 即使后缀改成了 .mp4 也大概率白屏。
- 检查控制台有没有
GET http://.../xxx.mp4 404或Failed to load resource - 用
ffprobe xxx.mp4确认编码：必须含h264视频流 +aac音频流 - 本地双击能播 ≠ 浏览器能播；开发时务必起一个本地服务（比如
python3 -m http.server），别直接用file://打开
controls 属性加了还是没按钮？
不是加了就生效——如果同时设置了 muted 和 autoplay，部分浏览器（尤其是 Safari 和新版 Chrome）会静音自动播放，但可能隐藏控件以避免干扰；更常见的是 CSS 把 <video></video> 高度压成 0 或设了 display: none。
- 确保至少写了
<video controls></video>，不要漏掉controls属性本身 - 检查 computed styles：高度不能为 0，父容器不能有
overflow: hidden切掉底部控件栏 - 移动端 iOS Safari 要求显式加
playsinline才能在页面内播放，否则强制全屏
怎么让视频一打开就自动播放且不卡住？
自动播放受策略严格限制：没用户交互前，带声音的视频默认被阻止。绕过办法是静音+自动，但必须满足两个硬条件：加 muted + autoplay，且不能靠 JS 后续调用 play() 模拟（会被视为非用户触发）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
<video autoplay muted playsinline><source src="demo.mp4" type="video/mp4"></source></video> -
playsinline对 iOS 必须，对 Android Chrome 可选但建议加上 - 不要在
window.onload里调video.play()——99% 会报DOMException: play() failed because the user didn't interact with the document first - 如果必须有声自动播，唯一可靠方式是等用户第一次点击/触摸后，再调
play()并取消muted
真正麻烦的从来不是写几行 HTML，而是 MP4 文件看着一样、实际编码不兼容，或是本地测试好好的，一扔到 Nginx 就跨域或 MIME 类型错——这些细节不查网络面板和响应头，光看代码永远找不到根因。
立即学习“前端免费学习笔记（深入）”；
