Skip to content

Latest commit

 

History

History
62 lines (53 loc) · 2.76 KB

File metadata and controls

62 lines (53 loc) · 2.76 KB

MEMORY 工程核心记忆(新会话快速恢复上下文)

项目核心定位

自研纯原生 video 标签 MP4 播放器,零第三方播放器依赖,主打自适应图标控制器+XG悬浮动效+自定义按钮

核心架构记忆

  1. 分层架构:core纯逻辑 / ui纯渲染 / buttons按钮管理 / utils工具
  2. 状态唯一来源:video DOM 原生属性,不缓存播放状态
  3. 容器尺寸监听:仅 ResizeObserver,不监听窗口

关键特殊功能记忆(最重要、不可遗忘)

  1. 全部按钮无文字,仅SVG图标
  2. 自适应收纳规则:自定义按钮优先收纳,其次选配按钮,基础按钮永远展示
  3. 按钮优先级:内置基础 > 内置选配 > 自定义按钮
  4. XG悬浮三层状态
    • 初始未播放:常驻居中播放图标,点击永久销毁
    • 播放中点击空白:临时暂停图标淡出
    • 暂停中点击空白:临时播放图标淡出

功能固定清单

固定基础按钮:播放暂停、进度条、时间、音量 可收纳选配按钮:画中画、下载、样式全屏、原生全屏(图标随状态切换) 扩展能力:外部自定义按钮注入、自适应收纳、完整销毁机制

全屏按钮图标切换

  • 样式全屏按钮:进入全屏显示退出图标,退出全屏显示进入图标
  • 原生全屏按钮:进入全屏显示退出图标,退出全屏显示进入图标

控制栏显隐规则

  • 视频播放中,鼠标离开播放器:自动隐藏
  • 视频播放中,鼠标不动3秒:自动隐藏
  • 视频暂停中:不自动隐藏
  • 正在拖拽进度条/音量:不自动隐藏
  • 更多菜单显示中:不自动隐藏

MORE按钮动态显示

  • 仅当容器宽度不足以显示所有按钮时才显示MORE按钮
  • 拉伸屏幕后,所有按钮展开时自动隐藏MORE按钮
  • 更多菜单在所有按钮展开后自动关闭

实现进度记录

  • 阶段一:项目基建 & 类型系统 ✓
  • 阶段二:核心能力封装(时间格式化、音量、全屏、画中画、下载)✓
  • 阶段三:基础控制器开发(进度条、时间、音量、显隐逻辑)✓
  • 阶段四:XGPlayer悬浮图标交互(初始播放、点击切换、淡出动效)✓
  • 阶段五:选配按钮 & 双全屏功能 ✓
  • 阶段六:自适应收纳 + 三点菜单 ✓
  • 阶段七:自定义按钮功能 ✓
  • 阶段八:键盘快捷键、生命周期销毁 ✓

快捷键支持

  • Space:播放/暂停
  • ArrowLeft/Right:快退/快进 5秒
  • ArrowUp/Down:音量增减 10%
  • F:原生全屏
  • M:静音切换

技术红线(永远遵守)

  1. 只做 MP4,不做流媒体
  2. 绝不引入第三方播放器
  3. 所有监听、观察者必须销毁
  4. 控制器自适应只根据播放器容器宽度
  5. UI 全部图标化、无文字