直接用标签可实现极简视频展示窗，但需正确设置controls、autoplay、muted、playsinline、loop等属性，并使用h.264+aac编码的mp4格式，配合object-fit或aspect-ratio确保响应式适配。
直接用 <video></video> 标签就能搭出极简视频展示窗，不需要框架、不依赖 JS，但有几个关键属性必须设对，否则在手机上点不动、在 Safari 里播不了、甚至根本不出画面。
为什么 <video></video> 加了 src 还不显示？
常见原因是缺少必要属性或路径错误。浏览器默认禁用自动播放（尤其含声音的），且部分格式（如 MKV）根本不被支持。
- 必须显式写上
controls属性，否则没播放按钮 ——<video controls src="demo.mp4"></video> -
src路径要相对正确：若 HTML 在/index.html，视频在同级/videos/clip.mp4，就得写src="videos/clip.mp4" - 优先用 MP4（H.264 + AAC），它在所有主流浏览器都原生支持；WebM 是备选，但 Safari 旧版不认
- 如果视频放本地双击打开（
file://协议），Chrome 会因安全策略拒绝加载，得用简易 HTTP 服务（比如 Python 的python -m http.server）
怎么让视频一打开就自动播放并静音？
这是实现“展示窗”感的关键，但浏览器强制要求：自动播放只允许在静音状态下触发。
- 必须同时设置
autoplay、muted和playsinline（iOS Safari 需要这个才不全屏） - 推荐写法：
<video autoplay muted playsinline loop src="hero.mp4"></video> - 别加
controls，否则用户能手动取消静音，破坏自动播放逻辑 - 注意：
loop不是必须，但加上后视频结束立刻重播，视觉更连贯
如何控制尺寸又适配不同屏幕？
单纯设 width 和 height 属性容易拉伸变形，响应式要用 CSS 配合 object-fit。
- 给
<video></video>加 class，比如<video class="hero-video" ...></video> - CSS 中用：
.hero-video { width: 100%; height: 400px; object-fit: cover; /* 保持比例裁剪，填满容器 */ } - 移动端想撑满宽度又保持高宽比，可改用
aspect-ratio: 16/9（现代浏览器支持），然后只设width: 100% - 避免用
max-width单独限制，它不约束高度，容易导致黑边或挤压
真正麻烦的不是写几行 HTML，而是视频编码参数 —— 即使文件扩展名是 .mp4，如果用 HEVC（H.265）编码，Safari 以外的浏览器大概率打不开。导出时盯紧“编解码器：H.264”和“音频：AAC”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
