WEB 视频开发-主流协议 HLS & DASH

作者 | 翁鹏

 42

上篇文章介绍了 MSE 来播放流媒体，但是 WEB 视频开发并不只依靠 MSE。这篇文章就来介绍主流的两种协议 HLS 和 DASH，以及如何制作并使用支持这些协议开源的客户端库来播放视频。

HLS

HLS (HTTP Live Streaming) 是苹果公司开发的流媒体传输协议，它使用 HTTP 来传输视频，可以防止被防火墙屏蔽。现在大部分视频网站都在使用，比如优酷、腾讯视频。

它的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。

它会生成一个 .m3u8 文件，其中除了包含一些元数据，还记录被分割视频的存放位置。分割的视频是 .ts 结尾的文件，是 MPEG-2 Transport Stream 容器，不过现在 HLS 也支持 fmp4。

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:4
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.0,
ad0.ts
#EXTINF:8.0,
ad1.ts
#EXT-X-DISCONTINUITY
#EXTINF:10.0,
movieA.ts
#EXTINF:10.0,
movieB.ts

一个 .m3u8 文件大概长上面那样。文件中以 # 开头的字符串要么是注释，要么就是标签，标签以 #EXT 开头，大小写敏感。

• EXTM3U M3U8 文件必须包含的标签，并且必须在文件的第一行

• EXT-X-VERSION M3U8 文件的版本，常见的是 3（目前最高版本应该是7），版本更高支持的标签就越多

• EXT-X-TARGETDURATION 指定了单个媒体文件持续时间的最大值

• EXT-X-MEDIA-SEQUENCE 播放列表第一个 URL 片段文件的序列号，默认序列号从 0 开始

• EXTINF 其后 URL 指定的媒体片段时长（秒）

• EXT-X-DISCONTINUITY 一般用于视频流中插入广告，表示前面的片段与后面不一样，让客户端做好准备

制作

去网上随便下载一个视频，用 Bento4 中的 mp4info 看一下文件信息，如下：

mp4info ./video.mp4
...
Track 1:
  flags:        3 ENABLED IN-MOVIE
  id:           1
  type:         Video
  duration: 30000 ms
  language: und
  media:
    sample count: 720
    timescale:    12288
    duration:     368640 (media timescale units)
    duration:     30000 (ms)
    bitrate (computed): 5860.270 Kbps
  display width:  1920.000000
  display height: 1080.000000
  frame rate (computed): 24.000
  Sample Description 0
    Coding:      avc1 (H.264)
    Width:       1920
    Height:      1080
    Depth:       24
    AVC Profile:          100 (High)
    AVC Profile Compat:   0
    AVC Level:            40
    AVC NALU Length Size: 4
    AVC SPS: [67640028acd940780227e5c044000003000400000300c03c60c658]
    AVC PPS: [68ebe3cb22c0]
    Codecs String: avc1.640028
Track 2:
  flags:        3 ENABLED IN-MOVIE
  id:           2
  type:         Audio
  duration: 30022 ms
  language: und
  media:
    sample count: 1408
    timescale:    48000
    duration:     1441024 (media timescale units)
    duration:     30021 (ms)
    bitrate (computed): 192.583 Kbps
  Sample Description 0
    Coding:      mp4a (MPEG-4 Audio)
    Stream Type: Audio
    Object Type: MPEG-4 Audio
    Max Bitrate: 192580
    Avg Bitrate: 192580
    Buffer Size: 0
    Codecs String: mp4a.40.2
    MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
    MPEG-4 Audio Decoder Config:
      Sampling Frequency: 48000
      Channels: 6
    Sample Rate: 48000
    Sample Size: 16
    Channels:    2

可以看到这个文件为 1080p，24 fps，5860 的码率。

ffmpeg -i ./in.mp4 \
    -vf scale=w=1280:h=720:force_original_aspect_ratio=decrease,yadif \
    -c:a aac -b:a 128k -ar 44100 -ac 2 \
    -c:v libx264 -b:v 2500k -maxrate 2675k -bufsize 3000k \
    -pix_fmt yuv420p -level 4.1 \
    -profile:v high -preset veryfast -crf 20 \
    -g 120 -keyint_min 120 \
    -sc_threshold 0 \
    -threads 0 -muxpreload 0 -muxdelay 0 \
    -hls_time 10 -hls_playlist_type vod -hls_list_size 0 \
    -f hls -hls_segment_filename '720p_%03d.ts' 720p.m3u8

运行上面命令就可以将 mp4 转换成 m3u8格式了。

fmpeg -hide_banner -i ./720p_000.ts # 使用 ffmepg 查看一下切片信息，可以看到信息和上面命令指定的一样
Input #0, mpegts, from './720p_000.ts':
  Duration: 00:00:10.02, start: 0.060111, bitrate: 2095 kb/s
  Program 1
    Metadata:
      service_name    : Service01
      service_provider: FFmpeg
    Stream #0:0[0x100]: Video: h264 (Main) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 24 fps, 24 tbr, 90k tbn, 48 tbc
    Stream #0:1[0x101](und): Audio: aac (LC) ([15][0][0][0] / 0x000F), 44100 Hz, 5.1, fltp, 134 kb/s