按需生成HLS流时，如何让播放器提前显示完整视频时长？

核心思路：给M3U8文件提前加上总时长标签 #

HLS协议本身支持通过#EXT-X-TOTAL-DURATION标签声明视频的完整总时长，播放器拿到这个标签后会直接显示完整时长，不用等所有TS分片生成。你需要在后端生成M3U8的初始阶段就写入这个标签，后续只需要追加分片条目即可。

具体实现步骤 #

• 第一步：提前获取原MP4的完整时长
  用FFmpeg的ffprobe工具（或者Java封装库对应的API）读取原视频的元数据，获取总时长。比如执行命令：

  ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 your-video.mp4
  

  用Java封装库的话（比如org.bytedeco.ffmpeg），可以通过解析视频流的format信息拿到duration字段，转换成秒级的浮点数（比如123.456秒）。

• 第二步：生成M3U8时写入总时长标签
  后端第一次创建M3U8文件时，先写入HLS的基础头部，再加上总时长标签，示例如下：

  #EXTM3U
  #EXT-X-VERSION:3
  #EXT-X-TARGETDURATION:10
  #EXT-X-TOTAL-DURATION:123.456
  

  之后每生成一个TS分片，就往M3U8文件末尾追加对应的条目：

  #EXTINF:9.876,
  segment_001.ts
  

  这样前端请求M3U8时，一开始就能拿到总时长信息，播放器会直接显示完整时长，同时加载已生成的分片进行播放。

• 第三步：前端无需额外修改
  react-hls-player底层依赖的hls.js默认支持EXT-X-TOTAL-DURATION标签，只要M3U8里有这个标签，播放器会自动识别并显示完整时长，不需要调整前端代码。

原思路合理性验证 #

你当前的按需转码+动态提供M3U8的思路是没问题的，属于典型的HLS实时转码流式输出场景，只是缺少了HLS协议中声明总时长的关键步骤，补上后就能解决时长显示的问题。

内容的提问来源于stack exchange，提问作者WilliamTaco