video和audio标签黑屏或报错的根本原因是编码格式不兼容、file://协议限制、autoplay策略拦截及交互时机不当，而非标签语法错误；必须用<source>多格式回退（如MP4+WebM）、起HTTP服务替代file://、autoplay必加muted与playsinline、有声播放需用户手势后调用play()。

video 和 audio 标签本身不难写，但页面一放上去就黑屏、报错、不自动播放、iOS 不响应——问题几乎全出在格式、路径、策略和交互时机上，不是标签写错了。

为什么加了 src 还是黑屏或报 MediaError: MEDIA_ERR_SRC_NOT_SUPPORTED

根本原因：浏览器根本不认识你给的编码格式。比如传了个 .mov 或 .avi，现代浏览器只认 MP4（H.264 + AAC）、WebM（VP9 + Opus）、OGG（Theora + Vorbis）这三类组合。

• 单靠 src 属性指定一个文件，等于把兼容性全押在一种格式上，风险极高
• 必须用 <source> 提供至少两种格式，让浏览器自己选支持的那一个
• MP4 是目前兼容性最稳的底线选择，但仅用 MP4 仍可能在 Firefox 或某些 Linux 浏览器里失败
• 验证方式：打开开发者工具 → Network 标签页 → 看视频资源是否返回 200，且 Content-Type 匹配（如 video/mp4）

本地开发时 file:// 协议下视频完全不加载

Chrome、Edge、Firefox 在直接双击 HTML 文件打开（即地址栏是 file:///xxx/index.html）时，会拒绝加载媒体资源，这是安全限制，不是 bug。

• 必须起一个本地 HTTP 服务，哪怕最简：用 npx serve、python3 -m http.server 或 VS Code Live Server 插件
• 绝对不要在 file:// 下测试 autoplay、play() 调用、甚至部分 preload 行为
• 移动端 Safari 更严格：即使走 HTTP，没用户手势触发也禁止有声 autoplay

想自动播放却静音失败、iOS 完全无反应

所有现代桌面/移动浏览器都默认阻止“有声自动播放”，这是硬性策略，绕不过去。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

• 加 muted 属性是启用 autoplay 的必要前提，缺一不可：<video autoplay muted>
• iOS Safari 要求：必须同时满足 autoplay、muted、playsinline（否则强制全屏），三者少一个都不行
• 如果需要有声自动播放，唯一合规路径是：等用户点击/触摸后，再用 JS 调用 play()，且不能包在异步回调里（如 setTimeout 或 Promise.then）
• play() 返回 Promise，务必 catch 错误，否则控制台静默失败：

  video.play().catch(e => console.warn('Autoplay prevented:', e));

  poster 图片不显示，或只闪一下就消失

  poster 是视频首帧占位图，失效常见于路径错误或 iOS 特殊行为。

  • 检查图片路径是否 404：在 Network 面板确认 poster 请求返回 200
  • iOS Safari 有个隐藏逻辑：一旦视频元数据加载完成（哪怕还没开始播），就会立刻隐藏 poster；如果视频本身第一帧是黑的，就会造成“一闪即黑”假象
  • 不要依赖 poster 做关键引导，它只是辅助；真正需要控制首帧展示，得用 canvas 截帧或服务端生成封面图
  • 若用相对路径，确保和 HTML 文件同级或路径计算正确；poster 不继承 base 标签，也不受 CSS background-image 规则影响

  格式转换、HTTP 服务、用户手势时机——这三块才是实际项目里卡住最多人的地方，而不是会不会写 <video controls>。