用标签需注意路径、尺寸、自动播放和移动端兼容：路径须小写连字符且相对HTML文件；autoplay必须加muted和playsinline；建议压缩视频、加preload="metadata"和poster封面。

直接用 标签就行，但多数人卡在路径、尺寸、自动播放和移动端兼容这四点上。

视频文件路径写错导致本地能播、上线就黑屏

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，上线必然失败

必须加的属性和默认行为陷阱

浏览器对 的静音自动播放策略非常严格：Chrome 和 Safari 默认禁止带声音的 autoplay，除非同时加 muted；iOS 还强制要求 playsinline，否则点开就跳全屏。

最小可用写法（适配桌面+手机）：

<video controls muted autoplay playsinline width="100%"><source src="videos/demo.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</source></video>

说明：

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 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"：只预加载时长、封面等元信息，不拉整个文件
• 避免放在
  或首屏关键区域；移到「作品集」
  内部，降低初始加载权重
• 若仅需展示效果，可用 poster 属性配一张高清缩略图：poster="images/demo-poster.jpg"

想自动播放但又不想有声音？用 muted 是唯一可靠方式

有人试过用 JS 调 play() 再 mute()，但 iOS Safari 会拒绝执行——只有在用户手势触发（如点击按钮）后才允许操作音频，而简历页不能依赖点击。

所以结论很明确：

• 要自动播 → 必须加 muted，这是硬性前提
• 要保留声音 → 只能靠用户手动点播放按钮，别试图绕过策略
• 别用 loop，简历场景下循环播放易引发反感，且增加 CPU 占用

真正容易被忽略的是：视频封面（poster）如果不设，Chrome 在加载中会显示纯灰块，破坏排版节奏；而很多模板连这个基础属性都漏了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！