TEACHING TOOL / 多媒体

媒体播放器

网页端通用媒体播放器，同时支持 音频和视频 播放。本地文件拖入即播，内置倍速（0.5x–3.0x）、四种播放模式循环切换、网页全屏 / 浏览器全屏、播放列表管理等完整功能。

功能特性

一套控件通吃音视频 — 视频在舞台内播放，音频切换为带旋转唱片的封面区，控件始终是同一套
多格式支持 — MP4、WebM、Ogg、MP3、WAV、AAC、FLAC、MKV 等浏览器原生支持的格式
9 档倍速 — 0.5x / 0.75x / 1x / 1.25x / 1.5x / 1.75x / 2x / 2.5x / 3x，切歌后保持
一个按钮四种模式 — 单击同一个按钮循环切换 顺序播放 → 单曲循环 → 列表循环 → 随机播放，四种模式各有专属图标（编号列表 / ↻+1 / 双向循环 / 洗牌），按钮提示同步变化
双全屏模式 — 浏览器原生全屏（requestFullscreen）+ 网页全屏（theater mode，隐藏页面其他内容只留画面）
进度条可拖动 — 实时显示已缓冲区域，点击或按住拖动跳转到指定位置
音量控制 — 0–100 滑块调节，3 档音量图标（高 / 低 / 静音）随音量变化
播放列表 — 添加、删除（单项 ×）、清空，音频自动读取时长并显示
拖拽上传 — 把本地音视频文件拖到播放列表面板上即加入列表
加载指示 — 缓冲期间显示 loading 动画；格式不支持时给出明确提示
自动播放下一首 — 播放结束按当前模式接力（顺序模式播完即停）

控件	作用
进度条	点击 / 拖动跳转；显示已缓冲区域
上一首 / 下一首	切换列表中的上一首 / 下一首；随机模式下"上一首"按播放历史回退
播放 / 暂停	单击切换（焦点在按钮上时按空格同样有效）
音量滑块	实时调节音量；图标随音量档位变化
倍速下拉	0.5x – 3.0x 共 9 档
播放模式	单击循环切换四种模式（编号列表 / 单曲 ↻ 带「1」角标 / 列表双向循环 / 随机洗牌），图标各不相同
网页全屏	theater 模式：隐藏标题、列表、提示，只留画面占满网页
浏览器全屏	调用 `requestFullscreen` 进入系统级全屏（双击画面同效）

光标停在输入框、下拉框上时快捷键不生效，避免误触。

原生 HTML5 媒体 — 统一用 <video> 元素承载音视频，audio-mode class 切换封面 / 画面两种舞台形态
Font Awesome — 6.4.0 CDN 图标；换图标时保留 fa-solid 字体族 class（丢了会变成豆腐块）
Blob URL — 本地文件通过 URL.createObjectURL 转为可播放的临时 URL，移除 / 清空时 revokeObjectURL 回收
Pointer Events — 进度条用 pointerdown + 指针捕获实现点击与拖动，兼容鼠标和触屏
Fullscreen API — 浏览器全屏带 webkit 前缀兜底；网页全屏用 body.theater-mode + flex 布局撑满
主题适配 — 颜色全部走 design-tokens.css 的 CSS 变量，深浅色主题自动跟随
响应式 — 窄屏隐藏音量滑块与快捷键提示，控制栏压缩为单行