<video>标签是最轻量可靠的原生视频嵌入方式，支持播放、暂停等控件，需设controls属性；推荐MP4（H.264+AAC）格式，配合preload="metadata"优化加载；路径须正确，服务器需配置正确MIME类型，自动播放须加autoplay muted，iOS需额外playsinline。
用 <video> 标签直接嵌入，不需 JS 也能预览
只要视频资源能被浏览器直接访问（比如放在同目录或 CDN 上），<video> 就是最轻量、最可靠的预览方式。它原生支持播放、暂停、音量、进度条，且无需额外依赖。
- 确保视频格式为
.mp4（H.264 + AAC），这是目前兼容性最好的组合；.webm可作为备选，但不是必须 - 把视频文件和
index.html放在同一目录下，路径写成src="demo.mp4"；若在子目录，写相对路径如src="videos/demo.mp4" - 加上
controls属性才能显示操作栏，否则只是黑屏静默加载：<video controls src="demo.mp4"></video> - 加
preload="metadata"可让浏览器只预加载时长/尺寸等信息，避免一打开就下载整个文件（尤其对大视频友好）
遇到“无法加载”或“空白区域”，先检查这三处
90% 的预览失败不是代码问题，而是资源路径或服务器配置导致的。
- 浏览器控制台报
net::ERR_ABORTED或404：说明src路径不对，或文件名大小写不符（Linux 服务器区分大小写） - 报
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE或无任何错误但黑屏：可能是服务器没返回正确的Content-Type（MP4 应为video/mp4），本地双击打开 HTML 时尤其常见——这时必须用本地服务器（如python3 -m http.server）启动，不能直接用file://协议 - 视频能加载但无法播放（显示“X”图标或卡在第一帧）：检查编码是否合规，可用
ffprobe demo.mp4看输出中是否有codec_name=h264和codec_name=mp3或aac；H.265（HEVC）或 AV1 编码在多数浏览器中默认不支持
想自动播放+静音？必须满足浏览器的 Autoplay 策略
Chrome、Firefox、Safari 都要求视频满足「静音+用户交互触发」或「静音+autoplay+muted」才允许自动播放，否则会静默失败。
- 正确写法：
<video autoplay muted loop controls src="demo.mp4"></video> -
autoplay单独存在无效；muted必须显式写出（哪怕你后续用 JS 解除静音） - 如果页面加载后仍不自动播，检查是否被浏览器扩展（如广告拦截器）阻止，或当前标签页处于后台
- 移动端 iOS Safari 还要求加
playsinline才能在页面内播放，否则强制全屏
不需要完整播放器？用 poster 和 CSS 控制初始体验
仅预览封面图+点击播放，比默认控件更干净，也适合做缩略图入口。
立即学习“前端免费学习笔记（深入）”；
- 用
poster="cover.jpg"设置首帧占位图，图片会覆盖在视频容器上，直到用户点击或播放开始 - 移除
controls，改用 JS 绑定点击事件：videoEl.addEventListener('click', () => videoEl.play())，但注意仍要保留muted才能保证首次点击可播 - 用 CSS 限制尺寸并居中：
video { width: 100%; max-width: 640px; display: block; margin: 0 auto; }，避免拉伸变形 - 如果视频宽高比不固定，加
object-fit: cover并设置容器aspect-ratio: 16/9（现代浏览器支持），否则可能裁切或留黑边
playsinline 属性——前者导致本地测试正常、上线后白屏；后者导致 iOS 用户点一下就跳全屏，体验断裂。 
