HTML `` 标签不支持原生分段加载或流式播放，需借助 fetch+Blob、MediaSource Extensions（MSE）、HLS/DASH 等方案实现；生产环境推荐使用 hls.js 或 dash.js 等成熟库。
HTML `
分段加载：适合已切片的点播音频/视频
适用于后端已将媒体文件切成固定时长片段（如 5 秒一个 `.mp4` 或 `.ts`），并提供索引清单（JSON / M3U8）的场景：
- 用 `fetch()` 拉取单个片段二进制数据，转为 `Blob`，再用 `URL.createObjectURL()` 创建临时 URL 赋给 `
- 监听 `ended` 事件，在当前片段结束前预加载下一个，避免卡顿
- 注意切换 `src` 会清空缓冲、触发短暂静音；可用两个 `
- 配合 `preload="metadata"` 和检查 `video.buffered.end(0)`，能预判缓冲进度，动态调度加载时机
流式播放：依赖 MediaSource Extensions（MSE）
当需要低延迟、实时喂流（如语音直播、传感器音频流、自定义编码流），必须用 MSE 手动拼接数据块：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 创建 `MediaSource` 实例，绑定到 `
- 调用 `addSourceBuffer('video/mp4; codecs="avc1.42E01E"')`，注意 MIME 类型必须与实际数据严格匹配
- 把后端推送的二进制块（如 MP4 片段、AAC 帧）用 `sourceBuffer.appendBuffer()` 写入，时间戳（PTS）必须连续准确
- 监听 `updateend` 判断追加完成，监听 `error` 处理追加失败；seek 时需先 `remove()` 对应区间再重新 append
HLS / DASH：生产环境首选方案
不建议从零手写 MSE 流控逻辑。成熟项目应优先采用标准化协议：
- HLS：服务端输出 `.m3u8` 索引 + `.ts` 或 `.aac` 分片；Safari 原生支持，Chrome/Firefox 需 `hls.js` 库兼容
- DASH：服务端输出 `.mpd` 描述文件 + `.m4s` 分片；需 `dash.js` 支持；优势是更灵活的码率切换和 DRM 集成
- 两者都支持自动带宽适配、断点续播、seek 精准定位，且库已封装好 MSE、错误重试、缓冲管理等细节
- 务必配置服务端 CORS 头（`Access-Control-Allow-Origin: *`），否则 `hls.js.loadSource()` 会跨域失败
基础标签能做的“伪分段”优化
如果只是想提升加载体验，不涉及自定义流控，可借助原生能力间接影响行为：
- 设 `preload="none"` 完全禁用预加载；设 `preload="metadata"` 只加载头信息（时长、分辨率），加快首帧显示
- 浏览器自动发起 Range 请求（如 `Range: bytes=0-1048575`），但范围由 MP4 的 `moov` 原子和关键帧位置决定，无法用 JS 直接指定字节偏移
- 通过 `video.buffered` 获取已缓存时间区间，结合 `currentTime` 主动判断是否需提前加载后续分片（需配合 HLS/DASH 库）
- 拖动进度条触发 seek 时，浏览器自动中断旧请求、计算新 Range 并重发，无需手动干预
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
