HTML文档结构中多媒体标签的嵌入技巧-html教程-PHP中文网

黑屏主因是格式不兼容、路径错误、file://协议限制或autoplay未muted；应使用多格式回退，首源必须为h.264 mp4且type精确匹配，本地开发需http服务，autoplay须加muted。

html文档结构中多媒体标签的嵌入技巧

直接用 <video></video> 和 <audio></audio>，别碰 <object></object> 或 <embed></embed>——这两个标签在现代浏览器里既没语义、又缺控制、还容易被拦截，纯属历史包袱。

为什么 `<video src="xxx.mp4"></video>` 加了路径还是黑屏？

根本不是 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></source>` 实现多格式兜底？

单 src 属性太脆弱，必须改用 <source></source> 显式声明多个来源，并带准确 type 值。浏览器按顺序尝试，遇到第一个支持的就停。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

至少提供 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></source></source></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 漏掉的话，哪怕视频加载成功也黑着——这些细节最容易被忽略，但恰恰是线上问题最常出的地方。