# 全屏视频首屏（Full-screen Video Hero）

镜语 · 版式与界面 / 布局方式

- 别名：视频背景首屏、视频 Hero、全屏视频背景、Video Hero、Background Video
- 口语：「一打开就是全屏视频的官网」「背景在播视频上面有字」「像汽车或者品牌官网的开头」
- 一句话：打开网页第一屏就是铺满的静音视频，压暗后叠上大标题和按钮
- 是什么：全屏视频首屏（Video Hero）让网页的第一屏被一段铺满的背景视频占据，上面叠大标题、一句说明和按钮。浏览器通常只允许静音视频自动播放，所以它多是没有声音的氛围画面；视频会被压暗或加渐变，保证文字清楚
- 缺了就不像：铺满首屏的静音视频；压暗后叠大标题；暂停与静音控制
- 加了更像：透明导航；底部进度条；片段编号
- 适合用在：品牌、汽车、旅行和活动官网的第一屏；摄影师、导演和视频创作者的作品集首页；视频账号的个人网站，直接展示作品片段
- 看哪里：演示用几张照片的缓慢推近和交叉淡入代替真实视频。看底部的渐变压暗让白字始终清楚，左下是标题和按钮，底部有进度条和静音按钮；点暂停后画面和进度条一起停住
- 注意：没有暂停按钮：持续运动会干扰阅读，也影响对动态敏感的用户；视频文件过大，手机打开半天还是黑屏；要有静态封面兜底；画面太亮太花，标题看不清
- 描述示例：做一个全屏视频首屏（Video Hero）的摄影师个人网站：第一屏铺满一段静音自动循环的背景视频，内容是城市夜景和人物的慢镜头；视频上叠从底部向上的黑色渐变；顶部透明导航，左边字距很宽的英文名，右边一个描边胶囊「约拍」按钮；左下角是小号字距宽的「SHOWREEL 2026」、大号白色标题「城市之光」、一句说明、白色实心「看全部作品」按钮和圆形暂停按钮；最底部一行显示片段编号、标题、细进度条和静音按钮
- 易混：
  - [滚动叙事](https://idea.ameng.dev/terms/scrollytelling.md)：滚动叙事随滚动推进内容；全屏视频首屏是打开就自动播放的一屏
  - [电影感](https://idea.ameng.dev/terms/cinematic-look.md)：电影感描述画面本身；视频首屏是网页怎样承载这段画面
- 相关：[推进](https://idea.ameng.dev/terms/dolly-in.md)、[交叉溶解](https://idea.ameng.dev/terms/cross-dissolve.md)

## 来源与延伸阅读

- [Wikipedia · Hero image](https://en.wikipedia.org/wiki/Hero_image)
- [MDN · 媒体与 Web Audio 的自动播放指南](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay)

网页版（含演示）：https://idea.ameng.dev/terms/hero-video