videojs / videojs-contrib-quality-levels

Other
157 stars 51 forks source link

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

Closed geosigno closed 2 years ago

geosigno commented 3 years ago

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?

When i remove the AUDIO="aac" it is working. It is also working if I remove the 2 #EXT-X-MEDIA lines. But in both cases there is no more sound.

gkatsev commented 2 years ago

My guess is that because the audio codec isn't declared in the manifest, Video.js is failing to play it back. If this is still an issue, we'd probably need a live stream to be able to test with. Even though, it'll likely not be an issue with this plugin, but with the playback engine itself.