<var id="k6qs5"><sup id="k6qs5"></sup></var>

  • 請叫我小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頭像
    最近瀏覽
    sjd123  LV4 2月29日
    JOEH60  LV10 2月18日
    笨小孩一號  LV22 1月16日
    deluser  LV3 1月4日
    Aurora_磊  LV9 2023年12月28日
    Magic丶M  LV6 2023年12月7日
    fengzf  LV16 2023年12月7日
    走丟的小怪獸  LV8 2023年12月1日
    酷酷的軻  LV10 2023年11月4日
    hadeslinux  LV1 2023年10月31日
    頂部 客服 微信二維碼 底部
    >掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
    国产 国产 高清|护士奶头又白又大又好摸|中文字幕av一区二区三区|午夜亚洲国产理论片2020
    <var id="k6qs5"><sup id="k6qs5"></sup></var>