最简可用的标签需提供有效src并添加controls属性；自动播放必须同时加autoplay、muted和playsinline；多格式回退用，推荐MP4（H.264+AAC）放首位；本地视频须通过HTTP服务访问，不可用file://协议。
用 <video></video> 标签嵌入原生视频，不依赖第三方库
直接用浏览器原生支持的 <video></video> 标签是最轻量、兼容性最好、SEO 友好的方式。它不需要加载 JS 库或外部播放器，页面一打开就能播（只要资源可访问）。
关键不是“能不能放”，而是“放得稳不稳”——常见问题包括：点开黑屏、提示“无法加载媒体”、iOS 上静音强制、安卓上自动播放失败等。这些问题基本都出在属性配置和资源路径上。
-
src必须指向可跨域访问的视频文件（如 MP4），不能是本地file://路径，否则 Chrome 会直接拒绝加载 - 建议同时提供
<source></source>多格式后备（如 MP4 + WebM），避免某些浏览器解码失败 - 加
controls属性才显示播放控件；没它，视频默认不可交互（除非你用 JS 自己写按钮） - 若想自动播放且不打断用户（尤其移动端），必须同时加
autoplay、muted和playsinline
为什么加了 autoplay 还不自动播？
现代浏览器（Chrome、Safari、Edge）对自动播放有严格策略：有声音的视频默认禁止自动播放，除非用户已与页面产生交互（如点击）。绕过方法只有两个：静音，或等待用户授权后 JS 触发。
最稳妥的静音自动播写法：
<video autoplay muted playsinline loop> <source src="hero.mp4" type="video/mp4"> </video>
-
muted是硬性要求，缺了 Safari/iOS 直接禁播 -
playsinline防止 iOS 全屏跳转（否则视频一播就弹出原生全屏界面） -
loop可选，但常配合autoplay使用，避免播完黑屏 - 不要依赖
preload="auto"来“预加载就等于能播”，它只影响缓冲策略，不影响播放权限
<video></video> 的常见错误信息和对应修复
控制台报错不是摆设，每条都指向具体配置漏洞：
-
DOMException: The element has no supported sources→ 检查<source></source>的type是否匹配实际文件类型（如 MP4 文件写成type="video/webm"就会失败） -
Media resource ... could not be decoded→ 视频编码不兼容（推荐用 H.264 + AAC 编码，MP4 容器；避免 AV1 或 HEVC，旧设备不支持） - 控制台无报错但显示空白/黑屏 → 查 Network 面板：视频请求是否 404 或 403？CORS 头是否缺失（服务端需返回
Access-Control-Allow-Origin: *）？ - 右键菜单里没有“保存视频”选项 → 不是 bug，是浏览器故意隐藏；可通过 JS 获取
video.src手动另存，但无法绕过同源策略限制
响应式布局下 <video></video> 怎么不拉伸变形？
默认 <video></video> 会按原始宽高比渲染，但加了 width="100%" 后容易被父容器挤压失真。真正可控的方式是用 CSS：
video {
width: 100%;
height: auto;
display: block;
}
- 别用
height: 100%—— 它依赖父元素高度，而视频容器通常高度未定义 - 加
display: block是为了消除底部默认留白（内联元素的基线对齐导致） - 如果要实现「宽满屏、高裁剪」效果（比如封面视频），用
object-fit: cover+ 固定容器宽高比（如 padding-top 百分比技巧） - 移动端务必测试
playsinline是否生效，否则 Safari 会强制全屏，破坏布局流
最易被忽略的一点：视频文件本身分辨率和码率。一个 4K@60fps 的 MP4 在低端安卓机上可能卡顿甚至崩溃，上线前务必用 FFmpeg 压成 1080p@30fps、码率 ≤5Mbps 的版本。
