用标签需注意路径、尺寸、自动播放和移动端兼容：路径须小写连字符且相对HTML文件；autoplay必须加muted和playsinline；建议压缩视频、加preload="metadata"和poster封面。
直接用 <video></video> 标签就行，但多数人卡在路径、尺寸、自动播放和移动端兼容这四点上。
视频文件路径写错导致本地能播、上线就黑屏
GitHub Pages 或任何静态托管服务都区分大小写，且不支持 Windows 下的反斜杠 \ 或相对路径里的空格/中文。常见错误包括：src="my video.mp4"、src="./videos/作品展示.MP4"、src="D:\resumes\demo.mp4"。
实操建议：
- 统一用小写字母 + 连字符命名：比如
src="videos/project-demo.mp4" - 路径必须是相对于 HTML 文件的，不是相对于 CSS 或 JS；确认视频文件跟
index.html在同一级或正确子目录下 - 上传前在本地用 Chrome 打开
file:///路径测试——如果这里就报 404，上线必然失败
<video></video> 必须加的属性和默认行为陷阱
浏览器对 <video></video> 的静音自动播放策略非常严格：Chrome 和 Safari 默认禁止带声音的 autoplay，除非同时加 muted；iOS 还强制要求 playsinline，否则点开就跳全屏。
立即学习“前端免费学习笔记（深入）”；
最小可用写法（适配桌面+手机）：
<video controls muted autoplay playsinline width="100%"> <source src="videos/demo.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
说明：
-
controls：不加就看不到播放控件，用户无法暂停/拖动 -
muted：没它，autoplay在大多数现代浏览器里直接失效 -
playsinline：iOS 必加，否则视频点击即全屏，破坏简历页面流 - 别设
height固定值，用width="100%"+ CSS 控制最大宽度更稳
嵌入后页面撑开、移动端溢出或加载慢
视频文件体积大是主因，一个未压缩的 MP4 动辄 20–50MB，会拖慢首屏渲染，甚至让简历页在弱网下白屏十几秒。
优化方向：
- 用
ffmpeg压缩：比如ffmpeg -i input.mp4 -vcodec libx264 -crf 28 -preset fast output.mp4，通常可压到 3–8MB 且画质无损感知 - 加
preload="metadata"：只预加载时长、封面等元信息，不拉整个文件 - 避免放在
<header></header>或首屏关键区域；移到「作品集」<section></section>内部，降低初始加载权重 - 若仅需展示效果，可用 poster 属性配一张高清缩略图：
poster="images/demo-poster.jpg"
想自动播放但又不想有声音？用 muted 是唯一可靠方式
有人试过用 JS 调 play() 再 mute()，但 iOS Safari 会拒绝执行——只有在用户手势触发（如点击按钮）后才允许操作音频，而简历页不能依赖点击。
所以结论很明确：
- 要自动播 → 必须加
muted，这是硬性前提 - 要保留声音 → 只能靠用户手动点播放按钮，别试图绕过策略
- 别用
loop，简历场景下循环播放易引发反感，且增加 CPU 占用
真正容易被忽略的是：视频封面（poster）如果不设，Chrome 在加载中会显示纯灰块，破坏排版节奏；而很多模板连这个基础属性都漏了。
