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

Question

I recvently started using nginx and video.js to establish a live stream. Problem: If I use videojs-contrib-quality-levels and videojs-hls-quality-selector as addon for video.js they should automatically insert a quality chooser based on the downloaded playlist with the hls variants. But this is not the case it just adds the quality menu with only the Auto option activated. Why does the HLS Playlist or the player does not access the variants and render the menu correct?

Versions:

video.js:7.6.6

videojs-contrib-quality-levels: 2.0.9

videojs-hls-quality-selector: 1.1.1

Here is my code to insert and start the player:

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();

This is how my playlist looks like:

#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

The solution is rather easy: In the playlist add the option RESOLUTION like

hls_variant _src BANDWIDTH=4096000 RESOLUTION=1920x1080;

This will enable the plugin to correctly render the chooser. There is no manual about this.

The config now looks like this

 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+)$ $1/$200kSLqEV5a6LYVfFa1jG.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;

 
 }
     }
 }
 
 }