m3u8格式以及CORS on Nginx的问题解决

技术开发Nginx
Cros

在项目开发过程中对于文件访问，特别是m3u8文件的访问经常涉及到跨域问题，在不同域名无法访问文件。所以需要配置nginx，让服务器文件支持跨域请求。

为什么要用m3u8格式的视频文件。

随着客户的增加，mp4文件播放的弊端也日益凸显，主要集中在两个方面，一是当视频时长比较长的时候，mp4的关键帧元素往往很大，需要加载很长时间才能开始播放，网速不好的情况缓冲加载就要20多秒的时间，客户早已急不可耐。二是当用户打开一个视频播放的时候，浏览器会持续请求下载mp4文件直到下载完成，就算是用户暂停视频播放浏览器也会持续这种下载状态，如果这个视频文件是500M则会请求服务器下载500M文件，是1G则会不停下载1G，给服务器硬盘和宽带造成很大浪费和压力。

于是我们参考优酷土豆等大型视频网站系统的播放文件，发现他们的视频文件都是分段播放的，即把一个大的视频文件按照一定大小或时长把一个视频分为N段播放，这样的优势是打开视频加载速度快，可以达到秒播，另外一个优势是当视频播放第N段的时候，浏览器会下载N+1段，N+2则不会下载，大大缓解了服务器硬盘和宽带压力，可知道高昂的宽带成本才是视频网站的最大压力。

什么是m3u8？

m3u8是苹果公司开发的一项新型播放格式，这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器，同样的视频文件既可以在flash环境播放，又能在无flash的html5环境播放，它的优势还不止于此，它可以实现多种码率在不同网速下的自动切换，网速好自动切换高清晰度视频，网速慢自动播放低清晰度文件，还可以实现流加密（视频文件本身加密）、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势，所以最新版的云转码视频系统仅把m3u8作为唯一的播放格式而放弃了其他格式的输出。

视频文件跨域问题处理

The following Nginx configuration enables CORS, with support for preflight requests.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

支持m3u8 格式

服务端返回的 Access-Control-Allow-Origin: * 表明，该资源可以被任意外域访问。如果服务端仅允许来自 http://foo.example 的访问，该首部字段的内容如下：

Access-Control-Allow-Origin: http://foo.example

现在，除了 http://foo.example，其它外域均不能访问该资源（该策略由请求首部中的 ORIGIN 字段定义，见第10行）。Access-Control-Allow-Origin 应当为 * 或者包含由 Origin 首部字段所指明的域名。

ps：转换mp4为m3u8格式
1
ffmpeg -i big.mp4 -b:v 1M -g 60 -hls_time 2 -hls_list_size 0 -hls_segment_size 500000 output.m3u8

来源：https://stackoverflow.com/questions/42026691/ffmpeg-creating-m3u8-from-mp4-video-file-size

https://blog.csdn.net/u012539700/article/details/79640458

使用ffmpeg将mp4切成ts片段的时候会碰到一个问题，就是生成的m3u8文件里只有最后的五个片段的信息。

这是因为ffmpeg 默认的list size 为5，所以只获得最后的5个片段。为了解决这个问题，需要指定参数-hls_list_size 0，这样就能包含所有的片段

或者第二种

1
ffmpeg -i yourfile.mp4 -codec: copy -start_number 0 -hls_time 15 -hls_list_size 0 -f hls output.m3u8

  • codec 表示媒体的编码类型，你可以改成其他格式，copy 是一个关键词，表示复制原有视频的编码类型；
  • hls_time 表示分片的时间长度，按照每个分片 10s 来分割；

  • f 表示输出文件格式类型，-f hls 就是表示按照 hls 来进行输出
    i 表示需要转换的文件地址
    来源：https://www.jackpu.com/mp4-huan-hls-huo-zhe-dash-jiao-cheng/

    经测试第二种方式更准确，第一种经常卡顿重复播放。

参考资料
分享到