请叫我小C
2023-08-30 10:31:39
利用nginx插件模块实现视频切片播放,再大的视频都可以播放
我相信在开发的过程中,很多小伙伴都会遇到需要播放视频的场景,如果是一个小视频,几秒钟就加载完毕了,如果是大视频呢?小伙伴会想到近点ffpeg,当然可以,但是部署太麻烦了,有没有简单点的呢?答案是肯定有,那么接下来看我的。
一.前期准备
- nginx(版本大于20)
- nignx-vod-model(今天的主角,就是靠它重新打包视频)
- 一点点前端知识(javascript)
二、开始走起
- 首先从官网下载nginx(nginx-1.20.0.tar.gz和nginx-vod-module-1.28)编译:
-
yum install gcc-c++,yum install -y pcre pcre-devel,yum install -y zlib zlib-devel,yum install -y openssl openssl-devel
-
将下载的插件位于nignx主目录上一层
-
执行./configure命令,这里将指定nginx安装位置以及安装的插件
-
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_gunzip_module --with-file-aio --with-threads --with-cc-opt="-O3" --with-http_ssl_module --with-openssl-opt=enable --with-http_mp4_module --with-stream --with-http_auth_request_module --add-module=../nginx-vod-module-1.28
-
编译 make & make install
-
启动nginx,至此后端服务完毕
三、配置nginx
- 打开nginx的配置文件,或者新建一个新的confi文件
- 建立两个server,一个80端口,一个9005端口,分别配置如下
- 80server配置
-
upstream videoServer { #least_conn; server 192.168.0.110:9005 weight=2; } server { listen 80; # listen 443 ssl; server_name test.zuidaima.cn; location /video { proxy_pass http://videoServer/video; } #视频缓存 location ^~ /vod { proxy_pass http://videoServer/vod; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #proxy_pass_header Set-Cookie; } #视频只缓存代理的 location ^~ /vcache/video { proxy_pass http://videoServer/vcache/video/; open_file_cache max=10000 inactive=60s; proxy_cache cache_one; proxy_cache_key $scheme$proxy_host$uri$is_args$args; proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie; proxy_cache_valid 200 206 304 301 302 72h; } }
- 9005server配置
-
server { listen 9005; server_name 202.197.117.185; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #视频代理,直接指向视频存储目录 location /video { vod hls; # 协议使用hls模式 vod_mode local; # 访问模式指定为local模式 sendfile on; directio 4k; directio_alignment 4k; output_buffers 1 256k; aio threads; vod_open_file_thread_pool default; vod_align_segments_to_key_frames on; # 每个切片以关键帧开头 vod_manifest_segment_durations_mode accurate; # 精确显示每个切片的长度 vod_metadata_cache metadata_cache 1024m; # 这个应该以G为单位,越大越好 vod_response_cache response_cache 128m; vod_mapping_cache mapping_cache 5m; # vod_hls_mpegts_align_frames off; # vod_hls_mpegts_interleave_frames on; #这里如果是https请求就写https,如果是http,就不需要s,这里应该有自动获取,暂时不晓得怎么写,先这样吧 vod_base_url https://$http_host/vcache; # 解决浏览器跨域问题 add_header Access-Control-Allow-Headers '*'; add_header Access-Control-Expose-Headers 'Server,range,Content-Length,Content-Range'; add_header Access-Control-Allow-Methods 'GET, HEAD, OPTIONS'; add_header Access-Control-Allow-Origin '*'; # 这里配置你视频存放的位置 alias /home/partybuild/backend/storage/video; #alias /opt/storage/video; } #视频缓存 location ^~ /vod { open_file_cache max=10000 inactive=60s; proxy_pass http://videoServer/video; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #视频只缓存代理的 location ^~ /vcache/video { proxy_pass http://videoServer/vod/; } }
配置完成,重启nginx
四、编写前端
- 需要一个播放器,我们用mui-player
- 假如我们的视频文件存放在这个目录
/home/partybuild/backend/storage/video/12345678.mp4
我们的播放地址就是:http://test.zuidaima.com/vod/12345678.mp4/index.m3u8
将地址嵌入播放器中即可播放视频,根据配置我们的视频大概在1.4m一个切片
下面是vue的一个播放器
export default { data() { return { randomUrl: 'http://test.zuidaima.com', isLoadUrl: false } }, mounted() { this.initUrl() }, methods: { getSrc(videoItem) { try { if (videoItem == null) { return null } if (this.isLoadUrl == false) { return null } const videoPathObj = JSON.parse(videoItem.yswj) console.log(this.randomUrl + '/vod/' + videoPathObj.name + '/index.m3u8') return this.randomUrl + '/vod/' + videoPathObj.name + '/index.m3u8' } catch { return null } } } }
nginx下载地址https://nginx.org/en/download.html
插件下载地址:
https://github.com/kaltura/nginx-vod-module/archive/refs/tags/1.28.tar.gz
播放截图
不断请求
评论
最近浏览
s4dmcc LV1
9月17日
一念永恒 LV4
7月31日
dapeng0011 LV15
6月6日
菜鸟蛋 LV2
5月23日
话不多的程序员 LV18
3月22日
wumingming LV1
3月19日
3334004690 LV10
3月7日
sjd123 LV4
2月29日
JOEH60 LV10
2月18日
笨小孩一号 LV22
1月16日