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

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;
}
}
}
}