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页面:
1 <!doctype html> 2 <html> 3 <head> 4 <title>Dash.js Rocks</title> 5 <style> 6 video { 7 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 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>
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 应该就有视频可以播放了
