使用 nginx 和 video,js 在 http 直播中假设质量选择器的问题

Question

我最近开始使用 nginx 和 video.js 建立直播。问题：如果我使用 videojs-contrib-quality-levels 和 videojs-hls-quality-selector 作为 video.js 的插件，它们应该会根据下载的带有 hls 变体的播放列表自动插入质量选择器。但事实并非如此，它只是添加了仅激活 Auto 选项的质量菜单。 为什么 HLS 播放列表或播放器无法访问变体并正确呈现菜单？

版本：

video.js:7.6.6

videojs-contrib-quality-levels: 2.0.9

videojs-hls-质量选择器：1.1.1

这是我插入和启动播放器的代码：

this.videoJSplayer = videojs('video_player', {
      html5: {
        hls: {
          overrideNative:true,
          //withCredentials: true
       },
      controls: false,
      autoplay: false,
      preload: 'auto'
     }
this.videoJSplayer.src([{type:'application/x-mpegURL',src: URL + ".m3u8"}]);
      this.videoJSplayer.controls('true');
      this.videoJSplayer.play();
      this.isButtonVisible = false;
      this.videoJSplayer.hlsQualitySelector();

我的播放列表是这样的：

#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=288000
test2_low.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=2048000
test2_hd720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=4096000
test2_src.m3u8

Answer 1

解决方法很简单：在播放列表中添加选项 RESOLUTION，如

hls_variant _src BANDWIDTH=4096000 RESOLUTION=1920x1080;

这将使插件能够正确呈现选择器。没有关于这个的手册。

配置现在看起来像这样

 worker_processes  1;
 events {
 worker_connections  1024;
 }
 # RTMP configuration
 
 rtmp {
 server {
 listen 1935; # Listen on standard RTMP port
 chunk_size 2048;
 # This application is to accept incoming stream

     application 00kSLqEV5a6LYVfFa1jG {
         live on; # Allows live input
 
                 exec ffmpeg -i rtmp://127.0.0.1/$app/$name
                     -c:v libx264 -c:a libfdk_aac -b:v 768k -b:a 96k -vf "scale=720:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://127.0.0.1/show/$name_low
                     -c:v libx264 -c:a libfdk_aac -b:v 1920k -b:a 128k -vf "scale=1280:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://127.0.0.1/show/$name_hd720
                     -c copy -f flv rtmp://127.0.0.1/show/$name_src;
 
         on_publish #server_auth;
 
     }
 
     application show {
         live on;
         # Turn on HLS
         hls on;
         hls_path #YOUR_PATH;
         hls_fragment 5;
         hls_playlist_length 30;
         # disable consuming the stream from nginx as rtmp
         allow publish 127.0.0.1;
         allow publish 139.18.13.224;
         deny publish all;
 
 
     hls_variant _low BANDWIDTH=288000 RESOLUTION=848x480;
     hls_variant _hd720 BANDWIDTH=2048000 RESOLUTION=1280x720;
     hls_variant _src BANDWIDTH=4096000 RESOLUTION=1920x1080;
 
    }
 
 }

 
 }
 
 http {
 sendfile off;
 tcp_nopush on;
 # aio on;

 directio 512;
 default_type application/octet-stream;
 include /usr/local/nginx/conf/mime.types;
 server {
     listen 80;
 
     location / {
         # Disable cache
         add_header 'Cache-Control' 'no-cache';

 # rewrite ^(/hls)/(\w+)$ /0kSLqEV5a6LYVfFa1jG.m3u8;

         # CORS setup
         add_header 'Access-Control-Allow-Origin' '*' always;
         add_header 'Access-Control-Expose-Headers' 'Content-Length';
         add_header 'X-Frame-Options' 'DENY' always;
 
         # allow CORS preflight requests
         if ($request_method = 'OPTIONS') {
             add_header 'Access-Control-Allow-Origin' '*' always;
             add_header 'Access-Control-Max-Age' 1728000;
             add_header 'Content-Type' 'text/plain charset=UTF-8';
             add_header 'Content-Length' 0;
             return 204;
 
         }
 
         types {
             application/dash+xml mpd;
             application/vnd.apple.mpegurl m3u8;
             video/mp2t ts;
             text/html html;
             application/x-javascript js;
 
 # text/javascript js;

             text/css css;
         }
 
         index index.html;
 
     root #stream_root;
     location ~ \.php$ {
     fastcgi_split_path_info ^(.+\.php)(/.+)$;
     fastcgi_pass unix:/var/run/php-fpm.sock;
     set $path_info $fastcgi_path_info;
     fastcgi_param PATH_INFO $path_info;
     fastcgi_index index.php;
     include fastcgi.conf;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param SCRIPT_NAME $fastcgi_script_name;
     fastcgi_param HTTP_PROXY "";
     proxy_set_header X-Forwarded-Uri /matomo;

 
 }
     }
 }
 
 }

使用 nginx 和 video,js 在 http 直播中假设质量选择器的问题

Problem postulating quality selector in http live streaming using nginx and video,js

http-live-streaming

video.js