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       ;

        server_name  www.test.com;

        location / {

            root    D:\server\code;

            index  index.php index.html;

        }

    }

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

server {

        listen       ;

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

 <!doctype html>

 <html>

     <head>

         <title>Dash.js Rocks</title>

         <style>

             video {

                 width: 640px;

                 height: 360px;

             }

         </style>

     </head>

     <body>

         <div>

             <video data-dashjs-player autoplay src="http://www.testvideo.com/stream.mpd" controls>

             </video>

         </div>

         <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

     </body>

 </html>

 //////////////////////或者

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8"/>

     <title>Auto-player instantiation example, single videoElement, using src attribute</title>

     <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

     <!--dash.all.min.js should be used in production over dash.all.debug.js

         Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->

     <!--<script src="../../dist/dash.all.min.js"></script>-->

     <style>

         video {

             width: 640px;

             height: 360px;

         }

     </style>

     <body>

         <div>

             <video controls="true" id="videoPlayer" />

         </div>

         <script>

             (function(){

                 var url = "http://www.testvideo.com/stream.mpd";

                 var player = dashjs.MediaPlayer().create();

                 player.initialize(document.querySelector("#videoPlayer"), url, true);

             })();

         </script>

     </body>

 </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 应该就有视频可以播放了

dash视频服务器本地搭建 (初探)的更多相关文章

  1. Gulp前端服务器本地搭建

    前端服务器本地搭建分三阶段: 1.Node.js的安装 2.Npm环境配置 3.编写JS文件 1.Node.js安装: 如图所示: Next: 选择I accept 然后Next: 选择安装文件的位置 ...

  2. SVN服务器本地搭建与使用

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6623026.html  使用SVN进行代码管理,需要搭建服务端资源库,然后在使用SVN的电脑安装SVN客户端或 ...

  3. MQTT服务器本地搭建

    1.1 初认识MQTT协议. 2.1 下载压缩包 前往EMQ下载地址:http://emqtt.com/downloads ,下载您的系统的版本,一般选择稳定版. 2.2 解压并运行 C:\Users ...

  4. 本地Git服务器的搭建及使用

    本地Git服务器的搭建及使用 Git本地服务器环境搭建 搭建好的本地git服务器的局域网ip是192.168.1.188,用户名是RSCSVN 教程链接:http://blog.csdn.net/cc ...

  5. javaCV开发详解之6：本地音频(话筒设备)和视频(摄像头)抓取、混合并推送(录制)到服务器(本地)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  6. video视频在本地可以播放，在服务器上不可以播放

    今天遇到一个比较坑的问题,视频在本地可以播放,然后放到服务器上面就播放不了,原因是因为服务器上面不支持mp4的播放,下面看解决办法.1.首先进入IIS(Internet Information Ser ...

  7. 本地搭建 Gradle 服务器，提高 Android Studio Gradle 下载速度

    AndroidStudio 更新以后,在公司网会卡在下载 Gradle 的地方,下载 Gradle 速度很慢. 看到别人的博客提供的解决办法本地搭建一个 Gradle 的服务器,然后把 Android ...

  8. jenkins调用本地搭建sendmail邮件服务器发送邮件

    应用jenkins发送邮件的邮件服务器 SMTP server 可以是本地的,也可以是远程,远程的就不多说了,在此说一下如何在jenkins本地服务器上搭建邮件服务器,并用jenkins发送邮件,详细 ...

  9. NodeJs本地搭建服务器，模拟接口请求，获取json数据

    最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...

随机推荐

  1. 工具(4): Git自助手册

    目录: ** 0x01 基础教程/0x02 分支流程/0x03 提交日志/0x04 变化比较/0x05 团队协作/0x06 高级用法/0x07 常见问题(FAQ)/0x08 掌握Git的秘诀 0x01 ...

  2. Spark报错

    1. Exception in thread "main" java.lang.OutOfMemoryError: Java heap space at com.mysql.jdb ...

  3. Centos6.5-dnsmasq安装

    1.使用yum install dnsmasq -y 安装dns(含dns server和dns代理功能) 2.查询dnsmasq已经安装成功 [root@localhost ~]# rpm -q d ...

  4. Map的clear与new Map的区别

    对于clear与new Map的区别.我们首先来看一个例子,本例子是我在实际开发中遇到的,需求就是讲map放入到list中,说白了就是list转map,有两种实现方式,分别是: // 方案一 Map& ...

  5. springcloud 设置feign超时时间

    转载网址:http://www.pianshen.com/article/187038775/

  6. eclipse mars2在高分辨率下（macpro）图标极小的问题

    Mac Pro装WIN10和Surface Pro同样有效 安装了Eclipse并且打开之后,发现图标显示极其细小,肉眼几乎无法看清了.这是由于Eclipse对高分屏没有作适配导致的. Windows ...

  7. python一（字符串，字典）

    list操作 name = ['小王','小米','小张','王强','张三','李四'] name.append('黄霑')#添加元素在最后一个 name.insert(,'王五')#指定下标插入元 ...

  8. jquery 设置 transform/translate 获取 transform/translate 的值

    //获取 transform 值 var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g; var str= progressUI.css(" ...

  9. HTML&CSS_基础02

    一.实体 # 1. 一些符号如 “<”. “>”. “ ”. ”©“等,不能使用其本身,需要借助实体(即转义字符),格式通常为:& (字符对应实体); 如 &lt . &a ...

  10. beego框架开发投票网站（1） beego基础之运行逻辑

    本文档需结合beego官方文档食用 博主也仅仅是边学边记录,不保证内容的正确性,请当做通俗读物来看待 首先 beego是一个基于go语言的框架 其次 beego是一个mvc框架 框架可以理解为对底层又 ...