Selector occasionally won't switch qualities

[bman46]

Description

When attempting to switch qualities, the selector will occasionally refuse to change the video source to the new quality. The quality selected by the user remains selected in the menu however the player never switches to the new quality. No errors are thrown in the console when this happens.
I have tried this on my windows 10 desktop PC and my Mac in chrome both have this issue.

Steps to reproduce

This issue appears to happen 'randomly' although it occurs more often than not.

1. Open this codepen in Chrome.
2. Play the video
3. Change qualities using the cog
4. If it succeeds, refresh the page and try again - sometime it works sometimes it doesn't.
5. if it fails, refresh the page and try again.

Results

Expected:
The video will change qualities as indicated by the player buffering and the network stream showing the traffic from a new source.
Actual:
The video player may or may not change the video quality.
Errors:
No errors are shown in the console.

Additional Information

The codepen above uses VideoJS version 6.1.0 but I have tested it in my own application with VideoJS version 7.10.2.
Chrome version: 88.0.4324.182

[bman46]

Here is a video recording of the issue: Youtube Video

[EdoardoLopez]

I have the same issue.
i tried with this versions:

• 1.2.4
• 1.2.3
• 1.2.2
• 1.2.0

and not worked.

[mootunes]

I'm also having this issue.

[izkmdz]

Thank you for your help in documenting this issue. It seems to be occurring when the video player is initialized twice.

Try removing the data-setup=“{}” property from your video component and initalizing the video player with:

videojs("video_1", {}, function() {
   var player = this;
   player.controlBar.addChild('QualitySelector');
});

[bman46]

@izkmdz Is there an alternative option instead of removing data-setup? I use that for other settings as well and cant remove it.

[izkmdz]

Hello @bman46, the issue seems to happen when using both data-setup and videojs('my-player') to initialize the video player twice. You should still be able to pass in properties to the videojs() function as you would do with data-setup.

For example,

data-setup='{"fluid": true, "controls": true}'

will accomplish the same as

var options = {
   fluid: true, 
   controls: true
};

videojs("video_1", options, function() {
   var player = this;
   player.controlBar.addChild('QualitySelector');
});

Alternatively, you can still use the data-setup attribute without the side effects of calling videojs(). Please see the videoJS documentation for ways to access the reference to the initialized video player which you can then use to call player.controlBar.addChild('QualitySelector');.

https://docs.videojs.com/tutorial-setup.html

Thanks!

[bman46]

Ok, thanks for your help @izkmdz. That resolves the issue!