黑屏主因是格式不兼容、路径错误、file://协议限制或autoplay未muted；应使用<source>多格式回退，首源必须为H.264 MP4且type精确匹配，本地开发需HTTP服务，autoplay须加muted。
直接用 <video> 和 <audio>，别碰 <object> 或 <embed>——这两个标签在现代浏览器里既没语义、又缺控制、还容易被拦截，纯属历史包袱。
为什么 <video src="xxx.mp4"> 加了路径还是黑屏？
根本不是 HTML 写错了，而是浏览器压根不认你给的格式或路径。常见现象包括：控制栏不出现、区域全黑、控制台静默失败（甚至不报错）。
-
src路径写错一个斜杠、大小写不一致，就 404；本地开发时双击打开 HTML（file://协议），Chrome/Safari 会直接拒绝加载媒体资源 - 只传了
.mov或.avi，但现代浏览器只认video/mp4（H.264 + AAC）、video/webm（VP9 + Opus）、video/ogg（Theora + Vorbis） - 服务端没返回正确
Content-Type（比如返回text/plain而非video/mp4），浏览器会静默拒解码
怎么用 <source> 实现多格式兜底？
单 src 属性太脆弱，必须改用 <source> 显式声明多个来源，并带准确 type 值。浏览器按顺序尝试，遇到第一个支持的就停。
- 至少提供
video/mp4+video/webm两套源，iOS Safari 不支持 H.265（HEVC），光靠 MP4 不够 -
type值必须和实际文件编码严格匹配，比如type="video/mp4"对应 H.264 编码的 MP4，不是所有 .mp4 都能播 - 示例写法：
<video controls muted autoplay preload="metadata"><br> <source src="vid.mp4" type="video/mp4"><br> <source src="vid.webm" type="video/webm"><br> Your browser doesn't support the video tag.<br></video>
自动播放（autoplay）为什么总失败？
Chrome、Safari 等主流浏览器强制限制无用户交互触发的有声自动播放，这是硬性策略，绕不过。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠解法：加
muted属性，再配autoplay，否则大概率静音失败或直接被拦截 - 如果必须有声播放，只能等用户首次交互（点击、滚动、触摸）后，用 JS 调用
play()，且必须捕获 Promise 拒绝：button.addEventListener('click', () => {<br> video.play().catch(e => console.warn('Autoplay prevented:', e));<br>}); -
preload="auto"在移动端基本无效，iOS Safari 默认忽略；preload="metadata"是更安全的选择，只拉取头信息（时长、宽高、编码），100–300ms 内完成
poster 图片路径 404 不会报错，只会留白；iOS 上视频加载失败时 poster 可能闪一下就消失；controls 漏掉的话，哪怕视频加载成功也黑着——这些细节最容易被忽略，但恰恰是线上问题最常出的地方。
