请叫我小C的gravatar头像
请叫我小C 2023-08-30 10:31:39
利用nginx插件模块实现视频切片播放,再大的视频都可以播放

我相信在开发的过程中,很多小伙伴都会遇到需要播放视频的场景,如果是一个小视频,几秒钟就加载完毕了,如果是大视频呢?小伙伴会想到近点ffpeg,当然可以,但是部署太麻烦了,有没有简单点的呢?答案是肯定有,那么接下来看我的。

一.前期准备

  • nginx(版本大于20)
  • nignx-vod-model(今天的主角,就是靠它重新打包视频)
  • 一点点前端知识(javascript)

二、开始走起

  1. 首先从官网下载nginx(nginx-1.20.0.tar.gz和nginx-vod-module-1.28)编译:
  2. yum install gcc-c++,yum install -y pcre pcre-devel,yum install -y zlib zlib-devel,yum install -y openssl openssl-devel

  3. 将下载的插件位于nignx主目录上一层

  4. 执行./configure命令,这里将指定nginx安装位置以及安装的插件

  5. ./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
  6. 编译 make & make install

  7. 启动nginx,至此后端服务完毕

三、配置nginx

  1. 打开nginx的配置文件,或者新建一个新的confi文件
  2. 建立两个server,一个80端口,一个9005端口,分别配置如下
  3. 80server配置
  4.     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;
            }
    }
  5. 9005server配置
  6. 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

四、编写前端

  1. 需要一个播放器,我们用mui-player
  2. ​假如我们的视频文件存放在这个目录
    /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

播放截图

利用nginx插件模块实现视频切片播放,再大的视频都可以播放

不断请求

利用nginx插件模块实现视频切片播放,再大的视频都可以播放


打赏

已有1人打赏

最代码官方的gravatar头像
最近浏览
dapeng0011  LV13 6月6日
菜鸟蛋  LV2 5月23日
话不多的程序员  LV18 3月22日
wumingming  LV1 3月19日
3334004690  LV8 3月7日
sjd123  LV4 2月29日
JOEH60  LV10 2月18日
笨小孩一号  LV22 1月16日
deluser  LV3 1月4日
Aurora_磊  LV9 2023年12月28日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友