DASH+nginx带宽自适应视频播放系统搭建

一、搭建服务器
1.1 ubuntu中
1下载源码
nginx的官网: http://nginx.org/en/download.html
在这里插入图片描述
一般选择stable version,下载之后解压:

tar -zxvf nginx-1.xxxxx.tar.gz

随后进入文件夹进行编译

cd nginx
./configure
make
make install

2 配置环境变量
nginx的默认路径为/usr/local/nginx/sbin

vim /etc/profile
NGINXPATH=/usr/local/nginx/sbin
export PATH=$PATH:$NGINXPATH
source /etc/profile

如果是实验室服务器没用权限的话,可以参考
linux下非root用户为自己设置环境变量&&-bash: nasm: 未找到命令问题的解决

3启动

nginx -t  测试配置文件
nginx -s reload  重载配置文件

4 验证
nginx的初始地址设置为localhost,因此在浏览器中输入localhost出现下图,表示nginx安装成功。
在这里插入图片描述

1.2 windows中
1下载包
在这里插入图片描述
2解压
3打开
在nginx.exe对应的cmd窗口用命令启动,不要直接双击nginx.exe。
启动命令

start nginx
nginx.exe

两种都可以,二选一即可。

4验证
同上。

二、视频处理
2.1视频处理软件
1安装
我的视频处理主要基于mp4box,下面提供安装方法

git clone https://github.com/gpac/gpac.git  
cd gpac  
git pull  
sudo ./configure --static-bin --prefix=/usr/local/MP4Box  
sudo make 
sudo make install   

2 环境变量配置

vim /etc/profile
MP4BOXPATH=/usr/local/MP4Box/bin
export PATH=$PATH:$MP4BOXPATH
source /etc/profile

3验证

MP4Box -h

2.2 视频处理
1音视频分离
从音视频中分离出视频:

ffmpeg -i video.mp4 -vcodec copy -an video.mp4

从音视频中分离出音频:

ffmpeg -i video.mp4 -acodec copy -vn video.m4a

2视频切片

MP4Box -dash 2000 -rap -dash-profile dashavc264:onDemand -bs-switching no video1920x1080.mp4 vidoe1280x720.mp4 video640x360.mp4 video256x144.mp4 video.m4a -out ed.mpd

如上命令处理之后,可以生成以下文件

ed.mpd
video1920x1080_dashinit.mp4
video1280x720_dashinit.mp4
video640x360_dashinit.mp4
video256x144_dashinit.mp4
video_dashinit.mp4

三、网页播放器
创建DashJS.html
复制以下内容

<!doctype html>
<html>
    <head>
        <title>Dash.js Rocks</title>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>
            <video id="videoPlayer" controls></video>
        </div>
        <script src="./dash.all.min.js"></script>
        <script>
            (function(){
                var url = "./ed.mpd";
                var player = dashjs.MediaPlayer().create();
                player.initialize(document.querySelector("#videoPlayer"), url, true);
            })();
        </script>
    </body>
</html>

这里需要的dash.all.min.js可以通过以下网站下载:
dash.all.min.js

四、修改nginx配置文件
注意,需要将dash.all.min.js、DashJS.html、ed.mpd、video1920x1080_dashinit.mp4、video1280x720_dashinit.mp4、video640x360_dashinit.mp4、video256x144_dashinit.mp4、video_dashinit.mp4放在一个文件夹中。这里在html中创建一个名为Dashdemo的文件夹,将它们放入。
接下来,修改conf配置文件
在路径/usr/local/nginx/conf(linux)或nginx/conf(windows)中找到nginx.conf文件。
在http中的server中添加如下内容:

location /Dashdemo{
            root   html;
            #index  index.html index.htm;
            
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Methods             
                $http_access_control_request_method;
                add_header Access-Control-Allow-Credentials true;
                add_header Access-Control-Allow-Headers 
                $http_access_control_request_method;
                add_header Access-Control-Max-Age 1728000;
                return 204;}
        }

注意。每次修改conf后需要进行nginx -s reload才能运行。

五、播放
接下来,在浏览器中输入ip地址:端口号/Dashdemo/DashJS.html就可以进行播放了。
在这里插入图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值