html嵌入视频应优先使用标签，必须配合提供mp4和webm双格式回退并声明type属性，避免仅用src导致静默失败；本地开发需http服务而非file://协议；autoplay需muted或用户交互后触发；poster路径需独立验证可访问。
现代 HTML 文档中嵌入音视频，<video></video> 和 <audio></audio> 是唯一应优先使用的标准标签；<object></object> 和 <embed></embed> 已被主流浏览器降权支持，且无语义、难调试、易被拦截，不建议在新项目中使用。
为什么不能只用 src 属性写 <video></video>
单靠 src 指定一个视频文件，浏览器一旦不支持该编码（比如传了 .mov 或未压缩的 .avi），就会静默失败——控制台可能只报 MEDIA_ERR_SRC_NOT_SUPPORTED，页面黑屏且无提示。
- 必须改用
<source></source>多格式回退：至少提供video/mp4（H.264 + AAC）和video/webm（VP9 + Opus）两版 -
type属性不可省略，否则浏览器无法预判是否支持，等同于没写 - 本地开发时若直接双击打开 HTML，Chrome/Safari 会因
file://协议拒绝加载媒体资源；必须起 HTTP 服务（如python3 -m http.server）
autoplay 不生效的三个硬性条件
Chrome、Safari、Edge 等现代浏览器强制要求：自动播放仅在满足以下任一条件时才被允许，否则 play() 会抛出 NotAllowedError，且控制台可能不显式报错。
- 加了
muted属性（有声自动播放仍被禁止） - 用户已与页面发生交互（如点击、触摸、滚动），之后再调用
play()，且需catchPromise 拒绝 - iOS Safari 还额外要求视频尺寸不为 0×0，且不能在
display: none容器中调用
poster 图片不显示的排查顺序
poster 不是 CSS 背景图，行为更接近独立 <img>：路径 404 时完全留白，控制台也不报错，最容易被忽略。
- 先检查 poster 路径是否可访问（直接粘贴进浏览器地址栏能打开）
- 确认视频
<source></source>资源本身能加载成功；iOS Safari 中若视频加载失败，poster 会闪现后消失 - 尺寸不匹配不会自动缩放——它按原始宽高比渲染，超出容器部分被裁剪；建议提前压缩为与
width/height一致的尺寸 - 需要 fallback 时，应在
video的error事件中手动插入<img>替代
真正卡住项目的从来不是标签怎么写，而是格式兼容性、协议限制、用户交互时机这三块。尤其要注意：iOS 对 autoplay、poster、preload 的处理逻辑和其他平台不一致，必须单独验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
