When clicking on a quality from the dropdown, nothing is happening

[geosigno]

Description

When I click on the quality such as 360, 720 or 1080, nothing is happening, there is no change of the quality. I can see the below warning in the console:

instrument.js?ea14:109 VIDEOJS: WARN: We received no playlist to switch to. Please check your stream.

When testing my below m3u8 file, it seems correct:

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="fr",NAME="Default",DEFAULT=YES,AUTOSELECT=YES,URI="audio/audio1.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="Audio-only",LANGUAGE="fr",NAME="Podcast",DEFAULT=NO,AUTOSELECT=NO,URI="audio/audio1.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=230000,NAME="360p",CODECS="avc1.42001e",RESOLUTION=640x360,AUDIO="aac"
360p/360p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=600000,NAME="480p",CODECS="avc1.42001e",RESOLUTION=854x480,AUDIO="aac"
480p/480p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2500000,NAME="720p",CODECS="avc1.4d0028",RESOLUTION=1280x720,AUDIO="aac"
720p/720p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=3500000,NAME="1080p",CODECS="avc1.640029",RESOLUTION=1920x1080,AUDIO="aac"
1080p/1080p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=128000,NAME="Audio",CODECS="mp4a.40.2",AUDIO="Audio-only"
audio/audio1.m3u8

Videojs is configured as below:

import videojs from 'video.js';
import 'videojs-contrib-quality-levels';
import videojsqualityselector from 'videojs-hls-quality-selector';

  const options = {
    fill: true,
    fluid: true,
    preload: 'auto',
    html5: {
        vhs: {
        enableLowInitialPlaylist: true,
        smoothQualityChange: true,
        overrideNative: true,
        useDevicePixelRatio: true,
      },
    },
  };

 const vjsPlayer = videojs(videoRef.current, {
      ...options,
      controls,
      autoplay,
      sources: [src]
    });
    vjsPlayer.hlsQualitySelector = videojsqualityselector;
    vjsPlayer.hlsQualitySelector({
        displayCurrentQuality: true,
    });

Is there anything i am doing wrong?

Codepen where issue is reproducible: https://codepen.io/geosigno/pen/MWmwYJY?editors=1000

UPDATE: when i remove the AUDIO="aac" it is working UPDATE 2: It is also working if I remove the 2 #EXT-X-MEDIA lines

In both cases, the resolution switch works, but there is no more sound.

[stierler]

@geosigno what is generating your M3U8/master manifests? Is it doing it on the fly, or are you using a program and uploading the m3u8 and ts segments separately? Just curious, as I want to see if they are following HLS spec (it's been a slight bit since I've touched up on it..)