能播不等于真能稳定播，常见问题包括CSS隐藏、路径404、跨域限制、编码不兼容（需H.264+AAC）、缺少多格式source、file://协议限制、autoplay需muted+用户交互、事件监听时机不当等。
能直接用 <video> 标签实现，但“能播”和“真能稳定播”是两回事。绝大多数失败不是代码写错了，而是视频文件、路径、编码或浏览器策略卡住了。
为什么加了 controls 还是黑屏没按钮
常见错误现象：页面上只有一块黑区域，右键没菜单，点击无反应。
- CSS 把
<video>高度压成 0 或设了display: none—— 检查开发者工具 Elements 面板里元素是否渲染、尺寸是否为 0 - 视频路径 404：Network 面板看有没有
GET xxx.mp4 404；别用./videos/demo.mp4这种相对路径，上线后常因路由重写或打包路径错位失效 - 跨域问题：视频在其他域名（比如 CDN），服务端没返回
Access-Control-Allow-Origin: *，iOS Safari 会静音甚至拒绝加载 -
controls是开关，不是保证——它只启用控件逻辑，但控件是否显示、能否响应，取决于视频是否加载就绪、是否被策略限制（比如 autoplay + muted 组合下部分浏览器会隐藏控件）
MP4 文件明明存在，为什么 Chrome / Safari 就是不播
浏览器只认特定编码组合，不是所有 .mp4 都能播。MOV、AVI、未转码的 MP4、ProRes 编码 MP4 全部不支持。
- 必须确认是 H.264 视频流 + AAC 音频流：用命令
ffprobe video.mp4查看输出，关键字段是Video: h264和Audio: aac - 仅提供 MP4 不够保险：Chrome/Firefox 对 WebM(VP9+Opus) 支持更好，Safari 对 MP4 更稳，所以至少配两个
<source>：<source src="demo.mp4" type="video/mp4">+<source src="demo.webm" type="video/webm"> - 本地双击 HTML 文件（
file://协议）会触发 Chrome 安全策略，直接拒绝加载视频——开发时务必起本地服务，例如python3 -m http.server
怎么让视频自动播放且不被浏览器拦截
带声音的自动播放在现代浏览器里基本被默认禁用，绕过它的唯一可靠路径是“静音 + 用户交互前触发”，但仍有硬性条件。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
autoplay和muted属性：<video autoplay muted>，缺一不可 - iOS Safari 强制全屏，必须加
playsinline（和旧版兼容的webkit-playsinline）才能内联播放 - 移动端需显式设置宽高，否则某些 WebView 渲染异常；CSS 里也建议写
width: 100%; height: auto;配合 - 不要在
window.onload或异步回调里调video.play()，99% 会报DOMException: play() failed because the user didn't interact with the document first - 如果一定要有声自动播，只能等用户第一次点击/触摸页面后，再用 JS 调
video.play()并立刻取消muted
用 JS 控制播放时为什么跳转失败或监听不到事件
视频状态是异步加载的，很多操作依赖就绪时机，不能“设了就生效”。
-
video.currentTime = 10可能无效：得等readyState >= 2（即HAVE_FUTURE_DATA）才真正可跳转；监听loadedmetadata比load更准，后者不保证元数据已解析 - 监听结束事件用
ended，但注意它只在自然播放完触发，用户拖拽到末尾不会触发；想捕获“到达结尾”，得结合timeupdate+ 判断currentTime >= duration - 0.1 - 暂停/播放状态要靠
paused属性判断，而不是靠有没有触发play事件——事件只是通知，属性才是真实状态 - 移动端对
play()调用更敏感，有些安卓 WebView 要求先load()再play()，否则静默失败
最常被忽略的点是：你以为在播的是 MP4，其实 ffprobe 一看是 HEVC 编码；你以为路径没问题，其实 Nginx 没配对 video/mp4 的 MIME 类型；你以为加了 controls 就万事大吉，结果 CSS 把 height 设成了 0。这些细节不打开 Network 和 Console 看一眼，光改 HTML 标签永远修不好。
