MediaSource接口不生成缩略图或切片视频帧，仅动态追加已编码媒体片段；缩略图需服务端预生成（如FFmpeg）或客户端用video+canvas截帧，再通过MediaSource按需加载缩略图视频流。
MediaSource 接口本身不生成缩略图，也不能直接切片视频帧；它只是为 HTML5 <video></video> 提供动态追加媒体数据（如 MP4、WebM 片段）的能力。真正实现“视频预览缩略图快速切片”，需要结合 canvas + video + MediaSource 的协同使用：先用 video 解码关键帧，用 canvas 截取图像，再按需组织为缩略图序列——MediaSource 在此流程中通常用于**按需加载预生成的缩略图视频流（如拼接缩略图的 WebM 视频）**，而非实时生成。
核心分工要理清
MediaSource 不负责解码、不负责截图、不负责帧分析。它的作用是：
- 接收已编码的媒体片段（如通过
SourceBuffer.appendBuffer()） - 让
<video></video>按时间轴播放这些片段 - 支持动态切换、无缝拼接、低延迟流式呈现
所以“缩略图切片”的生成环节必须前置——在服务端或客户端用其他方式完成。
可行的客户端缩略图切片流程（含 MediaSource 应用点）
若坚持全程前端实现（小体积视频、低精度要求），可走以下路径：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
加载完整视频到内存：用
FileReader或fetch().arrayBuffer()读取视频二进制 -
创建离屏 video 元素：设置
video.src = URL.createObjectURL(file)，并监听loadedmetadata -
定位关键时间点：例如每 1 秒取一帧，用
video.currentTime = t+video.play()+video.onseeked确保就位 -
用 canvas 截图：调用
ctx.drawImage(video, 0, 0, width, height)，转为canvas.toDataURL('image/jpeg', 0.8)或canvas.toBlob() - （可选）将缩略图打包为视频流：把多张缩略图编码为 WebM（需 WebCodecs API 或 FFmpeg.wasm），再用 MediaSource 播放该“缩略图视频”——此时 MediaSource 才真正介入
更实用的方案：服务端预生成 + MediaSource 按需加载
对大多数生产场景，推荐分离职责：
- 服务端用 FFmpeg 提前生成缩略图序列（如 100 张 JPG）或拼接成单个 WebM 视频（每帧 1 秒，分辨率统一为 160×90）
- 前端用 MediaSource 加载该 WebM 缩略图视频，并控制
video.currentTime跳转到指定缩略图位置（例如第 23 帧 ≈23s） - 利用
video.seeking和seeked事件确保精准定位，配合requestVideoFrameCallback（现代浏览器）获取当前帧像素（如需进一步处理）
这样既避免前端硬解码压力，又发挥 MediaSource 流式加载、时间精准控制的优势。
注意兼容性与性能边界
MediaSource 在 Chrome/Firefox/Edge 中支持良好，但 Safari 对 WebM 支持有限（更倾向 MP4 fragment）；而 requestVideoFrameCallback 目前仅 Chrome/Edge 支持。若需兼容 Safari，建议：
- 缩略图视频用 MP4（H.264 + AAC，分片为 fMP4）
- 用
MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E"')检测支持性 - 避免高频 seek：每秒超过 5 次跳转易触发解码卡顿，可预加载相邻几帧到内存缓存
不复杂但容易忽略。
