dash視頻服務器本地搭建 (初探)

時間 2019-11-06

標籤 dash 視頻服務器本地搭建初探简体版

原文原文鏈接

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

技術說明:html

dash: 將一個大視頻分解成不一樣分辨率, 不一樣清晰度的小視頻, 以及一個描述文件(後綴: mpd), 根據網絡帶寬自動調整視頻流, 看起來更順暢, 拖動也很順暢html5

用到的工具/技術:python

ffmpeg: 生成不一樣分辨率的視頻nginx

bento4: 將mp4視頻切割成許多小段npm

nginx: 負責展現網頁, 以及輸出視頻流服務器

html5: video 標籤, src屬性指向mpd描述文件網絡

dash.js: 配合video標籤, 播放dash後的視頻ide

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頁面:

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>Dash.js Rocks</title>
 5         <style>
 6             video {
 7                 width: 640px;
 8                 height: 360px;
 9             }
10         </style> 
11     </head>
12     <body>
13         <div>
14             <video data-dashjs-player autoplay src="http://www.testvideo.com/stream.mpd" controls>
15             </video>
16         </div>
17         <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script> 
18     </body>
19 </html>
20 
21 //////////////////////或者
22 <!DOCTYPE html>
23 <html lang="en">
24 <head>
25     <meta charset="utf-8"/>
26     <title>Auto-player instantiation example, single videoElement, using src attribute</title>
27     <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
28     <!--dash.all.min.js should be used in production over dash.all.debug.js
29         Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
30     <!--<script src="../../dist/dash.all.min.js"></script>-->
31 
32     <style>
33         video {
34             width: 640px;
35             height: 360px;
36         }
37     </style>
38 
39     <body>
40         <div>
41             <video controls="true" id="videoPlayer" />
42         </div>
43         <script>
44             (function(){
45                 var url = "http://www.testvideo.com/stream.mpd";
46                 var player = dashjs.MediaPlayer().create();
47                 player.initialize(document.querySelector("#videoPlayer"), url, true);
48             })();
49         </script> 
50     </body>
51 </html>