我相信在开发的过程中，很多小伙伴都会遇到需要播放视频的场景，如果是一个小视频，几秒钟就加载完毕了，如果是大视频呢？小伙伴会想到近点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

播放截图

不断请求