使用标签需提供mp4和webm双格式、显式controls、preload="metadata"及宽高属性；play()须绑定用户手势事件；poster路径需绝对且格式兼容；移动端需设playsinline等多属性并处理全屏事件。
用 <video></video> 标签是最直接的方式
HTML5 原生支持视频播放，不需要额外库或插件。浏览器内置的 <video></video> 元素就能完成基础播放，关键在于正确设置属性和提供兼容格式。
常见错误是只写一个 src 地址，结果在 Safari 或 Firefox 里黑屏——因为不同浏览器支持的编码格式不同。
- 必须提供至少两种格式：
.mp4（H.264 编码，Safari/Chrome/Edge 通吃）和.webm（VP8/VP9，Firefox/Chrome 更友好） -
controls属性要显式加上，否则默认不显示播放控件 - 加
preload="metadata"可减少首帧加载延迟；设为"none"则完全懒加载 - 别忘了加
width和height，否则在某些 iOS 版本中可能触发全屏强制行为
<video controls preload="metadata" width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser doesn't support the video tag. </video>
自定义控件时 play() 调用被拒怎么办
点击按钮触发 play() 却报错 DOMException: play() failed because the user didn't interact with the document first，这是现代浏览器的自动播放策略限制。
核心原因是：非用户手势（如页面加载、定时器）触发的 play() 会被静音拦截或直接拒绝。
立即学习“前端免费学习笔记（深入）”；
- 必须绑定在真实的用户事件上，比如
click、touchstart，不能靠setTimeout模拟 - 移动端尤其严格，
touchend有时也不够，优先用touchstart - 如果想预加载后自动播，可在用户第一次交互（如点击任意空白处）后调用
play()并缓存 Promise，后续再用 -
muted属性能绕过部分限制，但仅适用于无需声音的场景
poster 图片不显示的几个典型原因
poster 是视频加载前显示的封面图，但它不是“备用图”，而是一个严格的加载时序节点。
最常踩的坑是路径或格式问题导致浏览器静默失败，控制台还不报错。
- 路径必须可访问：用相对路径时注意当前 HTML 文件位置，推荐用以
/开头的绝对路径（如/img/cover.jpg） - 图片格式建议用
.jpg或.png，WebP 在旧版 Safari 中不支持 - 如果视频
src加载极快（比如本地开发服务器），poster可能一闪而过，实际已生效 - 某些安卓 WebView 会忽略
poster，需配合 JS 监听loadedmetadata后手动设背景
移动端全屏与退出逻辑混乱
iOS Safari 和部分安卓浏览器对 <video></video> 的全屏行为有特殊规则，不是所有样式都能覆盖。
比如加了 webkit-playsinline 还是跳全屏，大概率是因为没配对。
- 必须同时设置：
playsinline（标准属性） +x5-playsinline（QQ/微信内置浏览器） +webkit-playsinline（iOS Safari） - 退出全屏后，iOS 可能残留黑屏，需监听
webkitendfullscreen事件重置容器 - 不要用
object-fit: cover配合width: 100%强撑尺寸，容易触发 Safari 的“误判为可点击区域”而唤起全屏 - 如果嵌在
iframe里，父页面还需加allow="autoplay; fullscreen; picture-in-picture"
.mp4 就行。H.264 必须是 baseline 或 main profile，level ≤ 3.1，否则老 iPad 直接不解析。这个点调试起来没报错，只能靠设备实测。 
