使用<video>标签是现代浏览器中嵌入视频最直接可控的方式，需提供MP4/WebM等兼容格式、设置controls/preload/poster等属性，并注意MIME类型、autoplay静音策略及本地开发服务部署要求。
用 <video> 标签是最直接、最可控的方式
现代浏览器原生支持 <video>，不需要插件或第三方库。它能精准控制播放、静音、自动播放等行为，且兼容性已覆盖所有主流浏览器（Chrome 4+、Firefox 3.5+、Safari 3.1+、Edge 全版本）。
关键点在于：必须提供至少一个可用的 src，或用 <source> 指定多个格式以应对不同浏览器解码能力差异。MP4（H.264+AAC）是兼容性最稳的选择，WebM 可作为补充。
常见错误现象：VIDEO_ERROR_DECODE 或视频区域显示“X”图标，大概率是编码格式不被当前浏览器支持；只写 src="xxx.avi" 基本不会播放。
- 务必用
controls属性开启播放控件，否则用户无法操作 -
preload="metadata"比"auto"更友好——避免移动端默认下载整个视频 - 加上
width和height（或用 CSS 控制），防止页面加载时布局抖动 - 用
poster设置封面图，提升首屏体验
<video controls width="640" height="360" preload="metadata" poster="cover.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
为什么不用 <iframe> 嵌 YouTube 或 Bilibili？
适用于快速上线、不想处理转码/CDN/版权问题的场景，但代价明显：失去控制权、引入第三方脚本、影响 LCP 等核心性能指标。
立即学习“前端免费学习笔记（深入）”；
YouTube 的 <iframe> 默认会加载大量追踪脚本和推荐内容，即使加了 ?rel=0&modestbranding=1，仍可能触发隐私合规警告；Bilibili 的嵌入代码在部分国内网络环境下存在 DNS 解析慢、资源加载失败的问题。
容易踩的坑：
- 未设
allow="accelerometer; gyroscope; picture-in-picture"，导致全屏或画中画功能失效 - 忽略响应式：直接写死
width="560"，在手机上横向溢出 - 把
https://www.youtube.com/embed/xxx错写成主页链接，结果 iframe 显示的是完整 YouTube 页面
autoplay 和 muted 必须一起用才生效
几乎所有现代浏览器都强制要求：自动播放视频必须静音，否则会被策略拦截（表现为 play() failed because the user didn't interact with the document first）。这不是 bug，而是防打扰机制。
单独写 autoplay 没用；写 autoplay muted 是最低可行配置。如果后续需要用户点击后取消静音，得用 JS 主动调用 video.muted = false 并触发 play()，且该操作必须由真实用户手势（如 click、touchend）触发。
- 移动端 Safari 对
autoplay更严格：即使muted，也可能因页面未完全可见而延迟播放 - Chrome 77+ 后，
autoplay在后台标签页中会被暂停，即使已开始播放 - 测试时别只在桌面 Chrome 看效果，务必在 iOS Safari 和 Android Chrome 上实机验证
自托管视频要注意 MIME 类型和服务器配置
本地开发时用 file:// 协议打开 HTML，<video> 很可能报 404 或跨域错误——因为浏览器禁止从本地文件系统加载媒体资源。必须通过本地服务（如 python3 -m http.server 或 VS Code Live Server）运行。
部署到真实服务器后，若视频无法加载，先检查响应头中的 Content-Type：MP4 应为 video/mp4，WebM 应为 video/webm。Nginx/Apache 若未配置对应 MIME 类型，会返回 text/plain，导致浏览器拒绝解析。
- Nginx 配置示例：在
http或server块中加入types { video/mp4 mp4; video/webm webm; } - Apache 用户可编辑
.htaccess，添加AddType video/mp4 .mp4 - 用
curl -I your-video-url查看实际返回的Content-Type，比前端报错更早发现问题
视频文件本身也得注意：用 FFmpeg 转码时，H.264 编码要选 -profile:v baseline（兼容老设备），MP4 容器里音频必须是 AAC，否则 iOS Safari 会静音或拒播。
