全部作品
CASE 10 / 视频与成本

HLS 视频预览与 CDN 流量优化

先播 5 秒预览,点击再看完整录播。

将列表中的大体积完整录播自动播放改为 M3U8 短预览,用户点击后加载完整视频,减少无效传输和 CDN 成本。

我的职责方案与后端实现 · 视频任务 · 播放链路优化
HLS / M3U8阿里云 IMMOSS / CDNSidekiq
150万+累计注册用户 · 回流平台 · 截至 2026.10.22
265.2万元单日交易流水 · 2026.10.21 · 已支付订单金额
0.542亿元当月累计交易流水 · 2026.10.22 读取 · 10 月累计
01

业务背景

商品列表需要展示录播内容。原流程自动播放完整视频,单个视频可能达到数百 MB;大量用户只是浏览列表,并不需要完整观看。

02

关键问题

  • 列表自动播放与完整观看的需求不同,直接加载完整录播带来无效流量。
  • 大量历史视频需要异步生成预览,任务需要去重和断点续跑。
03

我的实现与取舍

  • 将自动播放入口切换到 HLS / M3U8 短预览,只有用户点击才进入完整录播播放。
  • 通过阿里云 IMM 截取视频中间 5 秒,生成播放列表,TS 分片按访问需要生成。
  • 由 Sidekiq 异步处理,保存预览记录以去重、统计和断点续跑,并维护预览文件清理。
04

落地结果

  • 减少列表浏览时对完整录播的无效加载。
  • 据实际工作反馈显著降低流量及 CDN 消耗,同时保留用户主动观看完整视频的能力。
05

欢迎深入交流

可以深入聊:HLS 分片、预览时长、懒加载、异步转码、缓存与 CDN 成本口径。

播放链路,点一下就明白。

这是加载策略演示。预览为 5 秒短片,完整录播仅在用户主动点击后加载。

浏览商品列表5 秒 M3U8 预览播放列表 + 按需分片
点击进入详情完整录播尚未加载完整视频

当前仅加载短预览,完整视频保持按需加载。

本演示不请求真实录播,也不代表流量节省比例或账单测量。

继续浏览Dify 工作流与多场景 AI 接入
LET’S CONNECT

微信联系杨帆

扫一扫,聊聊技术与下一份机会。

杨帆的微信好友二维码
微信扫码 · 手机端可长按识别或保存图片
EMAIL / 工作机会沟通

给杨帆写封邮件

期待聊聊后端、AI 工程与全栈机会。

[email protected]

打开邮件应用 ↗

没有配置邮件应用?复制邮箱,在常用邮箱中写信即可。