自研纯原生 video 标签 MP4 播放器,零第三方播放器依赖,主打自适应图标控制器+XG悬浮动效+自定义按钮。
- 分层架构:core纯逻辑 / ui纯渲染 / buttons按钮管理 / utils工具
- 状态唯一来源:video DOM 原生属性,不缓存播放状态
- 容器尺寸监听:仅 ResizeObserver,不监听窗口
- 全部按钮无文字,仅SVG图标
- 自适应收纳规则:自定义按钮优先收纳,其次选配按钮,基础按钮永远展示
- 按钮优先级:内置基础 > 内置选配 > 自定义按钮
- XG悬浮三层状态
- 初始未播放:常驻居中播放图标,点击永久销毁
- 播放中点击空白:临时暂停图标淡出
- 暂停中点击空白:临时播放图标淡出
固定基础按钮:播放暂停、进度条、时间、音量 可收纳选配按钮:画中画、下载、样式全屏、原生全屏(图标随状态切换) 扩展能力:外部自定义按钮注入、自适应收纳、完整销毁机制
- 样式全屏按钮:进入全屏显示退出图标,退出全屏显示进入图标
- 原生全屏按钮:进入全屏显示退出图标,退出全屏显示进入图标
- 视频播放中,鼠标离开播放器:自动隐藏
- 视频播放中,鼠标不动3秒:自动隐藏
- 视频暂停中:不自动隐藏
- 正在拖拽进度条/音量:不自动隐藏
- 更多菜单显示中:不自动隐藏
- 仅当容器宽度不足以显示所有按钮时才显示MORE按钮
- 拉伸屏幕后,所有按钮展开时自动隐藏MORE按钮
- 更多菜单在所有按钮展开后自动关闭
- 阶段一:项目基建 & 类型系统 ✓
- 阶段二:核心能力封装(时间格式化、音量、全屏、画中画、下载)✓
- 阶段三:基础控制器开发(进度条、时间、音量、显隐逻辑)✓
- 阶段四:XGPlayer悬浮图标交互(初始播放、点击切换、淡出动效)✓
- 阶段五:选配按钮 & 双全屏功能 ✓
- 阶段六:自适应收纳 + 三点菜单 ✓
- 阶段七:自定义按钮功能 ✓
- 阶段八:键盘快捷键、生命周期销毁 ✓
- Space:播放/暂停
- ArrowLeft/Right:快退/快进 5秒
- ArrowUp/Down:音量增减 10%
- F:原生全屏
- M:静音切换
- 只做 MP4,不做流媒体
- 绝不引入第三方播放器
- 所有监听、观察者必须销毁
- 控制器自适应只根据播放器容器宽度
- UI 全部图标化、无文字