跳到主要内容
前端术语库

UI 组件 · 内容展示

视频播放器

Video Player

也叫：播放器、视频播放、视频组件、Video、Media Player、Video Embed

在页面里播放视频的区域：画面加一条控制栏（播放 / 暂停、进度条、时间、音量、倍速、字幕、全屏），开始播放前显示封面和居中的播放按钮。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在课程详情页做一个视频播放器：宽度撑满内容区，16:9 比例，圆角 12px，黑色背景。播放前显示课程封面图，中间一个 64px 的半透明圆形播放按钮，右下角标出时长「10:30」。播放后底部浮出控制栏（由下往上渐变的半透明黑色背景）：左侧播放 / 暂停和「02:15 / 10:30」，中间是可以拖动的进度条（已播放白色、已缓冲浅灰，悬停时显示那个时间点的缩略图），右侧是音量、倍速（0.75x~2x）、字幕开关、画中画和全屏。鼠标 3 秒不动隐藏控制栏。不自动播放，preload="metadata"；支持空格播放暂停、左右方向键快退 / 快进 5 秒，记住上次看到的位置。

发给

01判断

你的内容是这样吗？

对照两列，确认视频播放器是不是你要找的。

符合这些情况，用视频播放器

  • 在线课程、教程、产品演示这类需要用户完整观看的视频
  • 官网、商品详情页里嵌入一段宣传片或使用说明视频
  • 直播回放、会议录像，用户需要拖动进度、倍速播放

是这些情况，换成别的

  • 首屏里只是营造氛围的静音循环背景视频，不需要控制栏

  • 几张图片轮流展示

    改用轮播图

  • 几秒钟的操作演示动画，用 GIF 或静音自动循环的小视频更轻

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    一打开页面就自动播放带声音的视频，还找不到关掉声音的按钮

  2. 02

    没有封面图，也没有先占好尺寸，视频加载出来把下面的内容整块挤下去

  3. 03

    进度条太细、不能拖动，只能从头看，想跳到后半段做不到

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由视频画面、播放前的封面图和居中播放按钮，以及底部控制栏（播放 / 暂停、进度条、时间、音量、倍速、字幕、全屏）组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一块 16:9 的深色区域，中间一个大的圆形三角播放按钮
  2. 2底部一条细进度条，旁边是「02:15 / 10:30」这样的时间
  3. 3右下角有音量、齿轮设置和全屏的小图标

04解释

详细解释

视频播放器由画面和控制栏组成。播放前显示一张封面图（poster），中间一个大的圆形播放按钮；播放后控制栏浮在画面底部：左边是播放 / 暂停和「02:15 / 10:30」的时间，中间是可以拖动的进度条（已缓冲的部分颜色稍浅），右边是音量、倍速、字幕、画中画和全屏。鼠标两三秒不动，控制栏自动隐藏。课程、产品演示、官网宣传片、直播回放都用它。可以直接用浏览器的 video 标签加 controls，也可以用 Video.js、Plyr、西瓜播放器这类库统一外观，或者嵌入 YouTube、B 站的播放器。

它和 轮播图 的区别：轮播图自动切换几张图片；视频播放器播放一段连续的视频，进度由用户控制。它和 图片预览 的区别：图片预览是点开大图看细节；视频播放器有时间轴和声音。官网首屏里静音循环播放的背景视频只是装饰，没有控制栏，不算播放器。

封面图和视频画面比例一致（通常 16:9），先把位置占好，免得加载后页面跳动。不要自动播放有声音的视频；要自动播放就静音，并给出明显的打开声音按钮。视频文件大，用 preload="metadata"，或者点击后再加载；长视频提供字幕和倍速。键盘能用空格播放暂停、左右方向键快退快进，全屏后按 Esc 退出。

开发者信息
术语 ID
component-video-player
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • video[controls]
  • video:not([autoplay][muted][loop])
  • .video-js
  • .plyr
  • .xgplayer
  • .dplayer
  • .prism-player
  • .jwplayer
  • .mejs__container
  • media-player
  • mux-player
  • lite-youtube
  • iframe[src*="youtube.com/embed"]
  • iframe[src*="youtube-nocookie.com/embed"]
  • iframe[src*="player.vimeo.com"]
  • iframe[src*="player.bilibili.com"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • video-player
  • video
  • player
  • media-player
  • video-embed
  • youtube-embed
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • VideoPlayer
  • ReactPlayer
  • MediaPlayer
  • Player
  • YouTubeEmbed
  • LiteYouTubeEmbed
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <video>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 图片开头
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30