---

为什么需要HLS？

传统RTMP流媒体虽然延迟低，但在移动互联网时代暴露出明显短板：

• 依赖Flash技术（已淘汰）
• 防火墙常拦截1935端口
• 移动网络切换时易断流

HLS作为苹果推出的替代方案，采用标准的HTTP协议传输，具有先天优势：

1. 穿透性强：使用80/443端口
2. 自适应能力：支持多码率动态切换
3. 兼容性好：原生支持iOS/Android/Web

协议核心拆解

m3u8文件结构

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.0,
segment000.ts
#EXTINF:8.5,
segment001.ts
#EXT-X-ENDLIST

关键标签说明：

• EXTINF：切片时长(秒)
• EXT-X-TARGETDURATION：最大切片时长
• EXT-X-ENDLIST：直播流结束标记

TS切片原理

TS（Transport Stream）是MPEG2标准容器格式，特点：

1. 每帧数据包含时间戳
2. 默认每10秒生成一个.ts文件
3. 可通过关键帧精准定位

FFmpeg实战编码

基础转码命令（版本4.3+）：

ffmpeg -i input.mp4 \
  -c:v libx264 -profile:v baseline -level 3.0 \
  -c:a aac -ac 2 -b:a 128k \
  -hls_time 6 -hls_list_size 0 \
  -hls_segment_filename "segment%03d.ts" \
  playlist.m3u8

参数解析：

• -hls_time 6：控制切片时长(秒)
• -hls_list_size 0：播放列表无限长（直播用）
• -profile:v baseline：确保旧设备兼容

前端播放器集成

推荐使用hls.js（版本1.0+）：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="player" controls></video>

<script>
  const video = document.getElementById('player');
  if(Hls.isSupported()) {
    const hls = new Hls({
      maxBufferLength: 30, // 缓冲窗口(秒)
      enableWorker: true  // 启用WebWorker
    });
    hls.loadSource('playlist.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.ERROR, (event, data) => {
      if(data.fatal) {
        switch(data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            hls.startLoad(); // 网络中断自动重试
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            hls.recoverMediaError(); // 媒体解码错误恢复
            break;
        }
      }
    });
  }
</script>

多码率自适应方案

master.m3u8示例：

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=1500000,RESOLUTION=1280x720
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=854x480
480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=640x360
360p.m3u8

生成命令需增加：

ffmpeg -i input.mp4 \
  -filter_complex \
    "[0:v]split=3[v1][v2][v3]; \
     [v1]scale=1280:720[v1out]; \
     [v2]scale=854:480[v2out]; \
     [v3]scale=640:360[v3out]" \
  -map "[v1out]" -c:v:0 libx264 -b:v:0 1500k \
  -map "[v2out]" -c:v:1 libx264 -b:v:1 800k \
  -map "[v3out]" -c:v:2 libx264 -b:v:2 400k \
  -map 0:a -c:a copy \
  -f hls -var_stream_map "v:0,a:0 v:1,a:0 v:2,a:0" \
  -master_pl_name master.m3u8 \
  output_%v.m3u8

避坑指南

平台兼容问题

1. iOS要求：
2. 首个切片必须包含关键帧

3. 音频采样率需为44.1kHz的整数倍

4. Android注意：

5. 避免使用HEVC编码
6. 需要配置Crosswalk WebView

延迟优化

graph TD
    A[主播端] -->|RTMP推流| B(转码服务器)
    B -->|HLS切片| C[CDN边缘节点]
    C -->|缓存| D{播放端}
    D -->|长连接| C

关键策略：

• 切片时长设为2-4秒（平衡卡顿率）
• 启用低延迟模式：-hls_flags split_by_time
• 前端预加载3个切片

测试资源

练习用视频样本： - 720p演示视频 - 多码率示例包

经过这套方案实践，我们成功将教育直播平台的卡顿率从12%降到3%，首屏时间控制在1.5秒内。建议首次部署时先用1-2小时的测试流验证各环节稳定性。