dash视频服务器本地搭建 (初探)

2019-4-17 15:54:17 星期三

技术说明:

dash: 将一个大视频分解成不同分辨率, 不同清晰度的小视频, 以及一个描述文件(后缀: mpd), 根据网络带宽自动调整视频流, 看起来更顺畅, 拖动也很顺畅

用到的工具/技术:

ffmpeg: 生成不同分辨率的视频

bento4: 将mp4视频切割成许多小段

nginx: 负责展示网页, 以及输出视频流

html5: video 标签, src属性指向mpd描述文件

dash.js: 配合video标签, 播放dash后的视频

python 2.7: bento4用到了

参考:

dash简介: https://blog.csdn.net/ai2000ai/article/details/80306693

dash简介: https://blog.csdn.net/datamining2005/article/details/62225579

IIS搭建本地视频服务器: https://www.instructables.com/id/Making-Your-Own-Simple-DASH-MPEG-Server-Windows-10/

nginx搭建dash服务器:  https://blog.csdn.net/OCTODOG/article/details/79007302

下载 ffmpeg软件: https://ffmpeg.zeranoe.com/builds/

下载bento4dash视频切割软件: https://www.bento4.com/downloads/

网页客户端dashjs(里边介绍了两种使用方法):  https://www.npmjs.com/package/dashjs

过程:

1. 修改hosts, 添加:

127.0.0.1 www.testvideo.com
127.0.0.1 www.test.com

2. nginx配置1: (h5页面)

server {
        listen       80;
        server_name  www.test.com;

        location / {
            root    D:servercode;
            index  index.php index.html;

        }
    }

nginx配置2: (视频), 重启nginx

server {
        listen       80;
        server_name  www.testvideo.com;

        location / {
            add_header Access-Control-Allow-Methods “GET,HEAD;
            add_header Accept-Ranges "bytes";
            add_header Access-Control-Allow-Origin "*";
            add_header Access-Control-Expose-Headers “Content-Lengrh,Content-Range,Date,Server,Transfer-Encoding,origin,range,x-goog-meta-foo1”;
            root    E:/video/fragment/output;

        }
    }

3. 准备HTML页面:

 

4. 下载原始视频

选择一个mp4视频下载到本地就可以了

5. 用ffmpeg工具处理视频

先下载安装ffmpeg, 然后将ffmpeg/bin 放到环境变量中, 要不然敲命令会很麻烦

我这里只是对原始视频用 ffmpeg视频处理了一下, 没有生成很多分辨率的视频, 所以目前只有一个视频文件

ffmpeg -i xxxx.mp4

6. 用bento4继续处理视频, 这个工具会把切好的视频放到当前目录的output目录中

先下载安装bento4, 然后将bento4/bin放到环境变量中, 要不然敲命令会很麻烦

mp4dash xxxx.mp4

这条命令处理完毕后会自动生成文件夹output, 这个output文件夹要跟nginx配置2中的root指令后边的值要一致

7. 访问 http://www.test.com/index.html 应该就有视频可以播放了