Media / 03
视频播放器
播放器由画面层、中央状态层、弹幕层与控制条四层叠成，控制条始终贴底并带渐变压暗。倍速、清晰度与弹幕开关用分段控件承载，选集与播放列表复用通用的列表结构。
播放中 · 弹幕层
.vplayer / .danmaku
1920 × 1080 · 画面占位
这一镜转场太顺了
配色好舒服，求色号
第 3 分 10 秒有惊喜
来晚了，前排还有位置吗
字幕同步做得不错
已三连，催更下一集
0:42 / 3:18
1.0×
1080P
正在播放
3:18
4K 片源
弹幕层为绝对定位且不接收指针事件的容器，内部每条 .dm-item 自行播放 8 秒的横穿动画，用 animation-delay 的负值错开出场时间；真实项目里由弹幕服务追加元素即可。
暂停 · 缓冲 · 已播完
三种中央状态层已暂停 · 继续播放
1:05 / 3:18
720P
暂停态：中央保留一个可点击的播放圆标，控制条左侧图标切为三角。
缓冲中 · 8%
0:02 / 3:18
自动
缓冲态：中央换成加载指示器并给出百分比，控制条保持可点击以便随时暂停。
已播放完成
下一集将在 5 秒后自动开始
3:18 / 3:18
1080P
结束态：中央给出重播与下一集入口，进度条拉满，避免用户误以为还在加载。
倍速 · 清晰度 · 开关
.segmented[data-seg]播放倍速
分段控件内的按钮点击后自动切换选中态，适合倍速这类互斥且选项不多的设置。
画面清晰度
清晰度切换通常伴随一次重新缓冲，切换后应保留当前播放位置而非从头开始。
弹幕
开启时弹幕层参与渲染，关闭时整层隐藏，画面本身不受影响。
播放行为
这类开关各自独立，用普通按钮配合提示更直观，不必强行塞进同一组分段控件。
选集与播放列表
grid 集数 + .list 播放列表选集 · 共 24 集
已更新至 12 集
正片已上线
待更新（13–24 集）
播放列表 · 同系列
.vplayer定位容器，需自备宽高比（推荐 aspect-video）与深色底；海报图与画面层自行叠加
.v-ctrl贴底控制条，顶部 36px 透明到 75% 黑的渐变保证文字在亮画面上仍可读
.v-progress4px 圆角轨道，内部 i 以百分比表示进度；缓冲进度建议用第二层半透明条叠加
.dm-item单条弹幕，8 秒从右向左穿屏，靠 animation-delay 负值错开；父层需设 overflow:hidden