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:\server\code;
            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 應該就有視頻可以播放了