VideoPlayer
视频播放器：原生 <video> + 框架无关状态机（@chenzy-design/core），无第三方媒体库。支持播放/暂停、进度拖拽跳转（含章节标记）、缓冲/已播放双层进度、音量（0–100，静音派生）、倍率/清晰度/线路下拉切换（切换后回跳原播放位置）、镜像、画中画、全屏、瞬时通知（加载/卡顿/镜像/倍率）。controlsList 控制控件项增删，theme 仅切换容器背景。键盘：Space 播放/暂停、←/→ 按 seekTime 跳转（焦点在播放器内时）。
如何引入
import { VideoPlayer } from '@chenzy-design/svelte';基础用法
传入 src 与 poster 即可播放，控件全自建。
控件裁剪
通过 controlsList 控制展示哪些控件。
章节标记
markers 在进度条上标注章节点。
API 参考
VideoPlayer
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
src | 视频播放地址 | string | undefined |
poster | 封面图地址 | string | undefined |
captionsSrc | 字幕/captions 轨道地址 | string | undefined |
width | 容器宽，number 视为 px | number|string | undefined |
height | 容器高，number 视为 px | number|string | undefined |
autoPlay | 是否自动播放 | boolean | false |
loop | 是否循环播放 | boolean | false |
muted | 是否静音播放（初始） | boolean | false |
clickToPlay | 点击视频画面是否切换播放 | boolean | true |
volume | 初始音量，区间 0–100 | number | 100 |
seekTime | ←/→ 键快进快退时间（秒） | number | 10 |
controlsList | 控件栏展示项（对齐 Semi shouldShowControlItem，控制增删） | string[] | ['play','next','time','volume','playbackRate','quality','route','mirror','fullscreen','pictureInPicture'] |
playbackRateList | 倍率菜单选项，默认 Semi 5 档 | { label: string; value: number }[] | [2.0x,1.5x,1.25x,1.0x,0.75x] |
defaultPlaybackRate | 默认倍率 | number | 1 |
qualityList | 清晰度菜单选项 | { label: string; value: string }[] | undefined |
defaultQuality | 默认清晰度 | string | undefined |
routeList | 线路菜单选项 | { label: string; value: string }[] | undefined |
defaultRoute | 默认线路 | string | undefined |
markers | 进度条章节标记点 | { start: number; title?: string }[] | [] |
theme | 主题，仅影响容器背景色（对齐 Semi） | 'dark'|'light' | 'dark' |
crossOrigin | 原生 crossorigin，CORS 取视频 | 'anonymous'|'use-credentials' | undefined |
class | 根类名透传 | string | '' |
videoRef | bindable：拿到原生 video 元素以做更灵活的控制（如多视频同步） | HTMLVideoElement|null | null |
onPlay | 播放回调 | () => void | undefined |
onPause | 暂停回调 | () => void | undefined |
onVolumeChange | 调整音量回调 | (volume: number) => void | undefined |
onRateChange | 切换倍率回调 | (rate: number) => void | undefined |
onQualityChange | 切换清晰度回调（在此更新 src） | (quality: string) => void | undefined |
onRouteChange | 切换线路回调（在此更新 src） | (route: string) => void | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onPlay | — | 开始播放 |
onPause | — | 暂停 |
onVolumeChange | — | 音量变化 |
onRateChange | — | 倍率变化 |
onQualityChange | — | 清晰度变化 |
onRouteChange | — | 线路变化 |
Accessibility
| ARIA role | application |
| 键盘交互 | SpaceArrowLeftArrowRightArrowUpArrowDownHomeEndEscape |
- Space 播放/暂停、←/→ 按 seekTime 跳转，仅当焦点在播放器容器内时响应（Semi handleBodyKeyDown，避免劫持页面其他控件键位）
- 所有控件为原生 <button>，aria-label 走 locale（play/pause/mute/unmute/fullscreen/exitFullscreen/pictureInPicture/mirror/playbackRate/quality/route/volume）
- 进度条 role=slider，aria-valuemin/max/now 为秒；Home/End 跳到首尾；章节标记 aria-hidden
- 音量条 role=slider（0–100），↑/↓ 步进 10；静音按钮 aria-pressed
- 倍率/清晰度/线路为菜单按钮：aria-haspopup=menu、aria-expanded、role=menuitemradio + aria-checked，↑/↓ 漫游、Enter/Space 选择、Esc/外点关闭
- 加载/卡顿通知 aria-live=polite；错误态 role=alert；时间显示 aria-hidden（视觉冗余）
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-video-player-transition | var(--cd-motion-duration-fast) | 控件显隐 / 图标 hover 过渡时长 |