Plyr: Volume control flickers/disappears on initialization when 'volume' is present in the controls array

[FlipgridMartin]

Expected behaviour

When setting the volume control in the controls array on Plyr initialization, the volume control should be visible in the Plyr controls bar.

Actual behaviour

When setting the volume control in the controls array on Plyr initialization, the control disappears after a fraction of a second.

Steps to reproduce

Here's a codepen that reproduces. If you comment out the code with custom initialization options and uncomment the default Plyr initialization, you'll see the volume control works fine. In the initial codepen state, the volume control doesn't persist even though it's designated to in the controls array.

https://codepen.io/mg0stisha/pen/VqeaqE

Environment

• Browser: Google Chrome
• Version: 71.0.3578.98
• Operating System: macOS
• Version: v10.13.6 (17G2307)

Console errors (if any)

None

Link to where the bug is happening

https://codepen.io/mg0stisha/pen/VqeaqE

This looks to be similar to #1208, though it says that was fixed in 3.4.5. Wondering if this might be a regression. Thanks for your work!

[FlipgridMartin]

Update: the volume bar persists _after_ you use the seek bar for the first time. This issue also seems to be on Chrome only, I cannot reproduce on Firefox or Safari on macOS.

[Rafostar]

This bug also happens on mobile version of Chrome. Setting plyrInstance.currentTime = 0; before starting playback seems to be a temporary workaround.

[wdl]

Although this is a temporary fix, try the following code.
player.on('loadeddata', event => { player.currentTime = 0; });

[Onethity]

The issue still appears in plyr 3.5.6, chrome 76.0.3809.100.

[NotNotMarshall]

Although this is a temporary fix, try the following code.
player.on('loadeddata', event => { player.currentTime = 0; });

I love you 1000 times!!

[ufukomer]

This is still a problem. If anyone find the reasons please tell me so that I can create a pull request.

Chrome Version 78.0.3895.5 (Official Build) dev (64-bit)

[soulcurrymedia]

We are also experiencing this issue on Windows 10, Ubuntu with Chrome 77.0.3865.90.

The hack fix suggested by @wdl works. Thanks.

[MarcusCemes]

Although this is a temporary fix, try the following code.
player.on('loadeddata', event => { player.currentTime = 0; });

This works but changing the quality (or adjusting sources) will seek the video to the beginning.

Strangely, changing quality during playback will fix the volume slider, and modifying the above solution to set currentTime to itself will force a UI refresh without seeking to the beginning.

player.on("loadeddata", _event => { player.currentTime = player.currentTime; });

Plyr 3.5.6, Chrome 77.0.3865.90 on Windows 10