Start a new topic

Two streams with different quality. How to change quality?

I have an IP-camera with 2 video RTSP streams - main (FullHD) and extra (D1). My server is pulling both and convert them to RTMP using ffmpeg. My task is to be able to change video quality (with no audio) in the Viblast player.

I have created playlist with both qualities:


My Nginx configuration for that case:

application cam3 {
        live on;
            hls on;
            hls_path /var/www/hls/cam3;
            hls_fragment_naming timestamp;
            hls_fragment 5s;
            hls_playlist_length 30s;
            hls_nested on;
            hls_variant _fhd BANDWIDTH=4096000 RESOLUTION=1920x1080;
            hls_variant _low BANDWIDTH=1024000 RESOLUTION=704x576;

Is it correct ABR stream or something is wrong?

I received a reply from support:

"If you are integrating the Viblast Player with the pure HTML5 video tag you can implement your custom UI with the player's API:

If you are using the video.js framework integration, you can use the plugin provided by our team:"

I tried to use video.js + plugin, unfortunately it doesn't work in Google Chrome. I also tried to change playlist (you can try on examples ("Viblast Player ABR Capabilities" and "Quality Change Policy") and I didn't see the video, but if I add a line "audio: false" or data-viblast-audio="false" - it starts playing, but I can't select video quality (only in "Quality Change Policy" example:

Could you check how to work quality selection in the player without audio stream. If the player works properly then please explain to me my mistake. Thanks and Best regards!

Hello Dmitry,

Thank you for the detailed report. 

Your HLS stream does not have audio. It contains only video stream. Because the playlist does not have codec information, Viblast assumes that the stream has audio and video. That is the reason why it does not work without extra arguments. The Attribute "audio"="false" forces the player to be initialised  without audio and that's why you can play it. The automatic detection is in our feature's list and we hope will be available soon with the incoming releases and you will not have to explicitly set this argument.

It seems like Viblast Player has an issue with "onupdatedmetadata" when the audio is forcefully  disabled. The event  "onmetadataupdated" is not fired in this case. We will fix it with the next release for sure.

As a workaround, you can add listener to video tag for "playing" event, i.e. :

Instead of:

  player.viblast.addEventListener('updatedmetadata', onUpdatedMetadata);

you can use:  

  player.addEventListener("playing", onUpdatedMetadata, false); 

We will keep you posted on the progress.

Best regards,


I guessed about that reason. Thanks for your work anyway! It's so good to see you are moving forward, if you need to check something just let me know or use my playlist.


I thought that switching time between quality depend on "hls_playlist_length" parameter, but change of this to 15s have had absolutely no effect. It also takes up to 30 seconds. So what can have an impact on delay?

PS:  it works:

player.addEventListener("playing", onUpdatedMetadata, false); 



We released the new version/6.40/ of the Viblast Player. It has a lot of improvements including the issues you mentioned. Also, with this release there is no need to explicitly set "audio" or "video" attributes for audio only and video only streams.

   While playing a hls video, it takes nearby 15 secs to play when compared to some other players, (like flow player, js player) it takes more than 10 secs to play. Could you please give any solution for this issue.


Can you share your test stream?

Login to post a comment