1. 概述
为了解决大尺寸背景视频在线上环境下首屏加载慢、场景切换卡顿以及网络抖动导致的播放中断问题，我们引入了 HLS 流媒体技术方案。
为什么选择 HLS？
- 分段加载：视频被切分为多个小片段（.ts），浏览器按需下载，显著提升首屏秒开速度。
- 自适应码率：支持根据用户网络状况自动调整清晰度（需配置多码率源）。
- 更好的 Seek 体验：在长视频中跳转场景时，只需请求对应的切片，响应更快。
HLS 是如何工作的？
想象一下，如果你要搬运一大桶水（MP4 文件），你需要一次性搬走或者等桶满了才能用。而 HLS 则是把这桶水装进一个个小杯子里：
- 切片（Segmenting）：原始视频被切成很多个小片段（通常是 2-10 秒一段），文件后缀通常是
.ts。 - 索引文件（Manifest）：生成一个播放列表文件，后缀是
.m3u8。这个文件不含视频，它只是一份“地图”，告诉播放器：“第一个片段在哪里，第二个片段在哪里”。 - 按需加载：播放器先读
.m3u8，然后只下载当前需要播放的那几个小片段。
3. 视频处理
使用 ffmpeg 工具将原始 source.mp4 转换为 HLS 格式。
转换命令
ffmpeg -i source.mp4 \
-profile:v main -level 3.1 \
-start_number 0 \
-hls_time 6 \
-hls_list_size 0 \
-f hls source/hls/index.m3u8
-hls_time 6: 每个切片约为 6 秒。-hls_list_size 0: 索引文件包含所有片段（点播模式）。- 输出结果：得到
index.m3u8和index0.ts到indexN.ts。
4. 依赖安装
由于 Chrome/Firefox 等浏览器不原生支持 HLS，我们需要引入 hls.js 库。
npm install hls.js --save
5. CDN 部署规范
上传 HLS 文件到服务器时，必须遵循以下规则：
-
目录结构一致性：
index.m3u8必须与所有.ts文件放在同一个目录下。 -
跨域配置 (CORS)：CDN 必须允许来自前端域名的跨域请求，否则
hls.js会因无法读取.m3u8而报错。 -
MIME 类型：
.m3u8:application/vnd.apple.mpegurl或application/x-mpegURL.ts:video/MP2T
6. 使用示例
在页面中直接配置 HLS 入口地址即可：
const HLS_VIDEO_SOURCE = 'https://xxx/xxx/index.m3u8';
// 使用方式
<VideoBackground
src={HLS_VIDEO_SOURCE}
// ... 其他 props
/>
