Plyr: Feature: Hide controls until playback starts

[daslicht]

Hi,
is theer a way to show the controls only after pressing playback, please?
The default seams to be that the controlas are shown anytime

Cheers Marc

[sampotts]

Not sure what you mean? Default is they hide while playing as per https://plyr.io. It's the same on YouTube, Vimeo, just about any player...

[daslicht]

Plyr shows its controls right after loading the page:

Youtube:

[Joeao]

By looking at the docs, the easiest way I could think to do it would be:

const player = new Plyr('#player');

player.toggleControls(false)

player.on('play', event => {
     player.toggleControls(true);
});

However I tried on Codepen and it doesn't actually work. You could workaround with CSS, showing controls on the play event.

I achieved this functionality by making my own play button and backdrop image and initialising Plyr when clicking the button, but it may be overkill for just hiding the controls.

[friday]

You need to disable hideControls (auto hiding) too, and then add your own events for auto hiding if you want that.

https://codepen.io/fullkornslimpa/pen/EpmKga?editors=1010

I don't think this behaviour has to be supported directly, if it can be with a workaround. But perhaps this workaround isn't good enough, since it requires auto hiding to be disabled?

[daslicht]

AWESOME , thank you !

[friday]

At the request from Slack:

If you want the same behavior with hideControls enabled:
https://codepen.io/fullkornslimpa/pen/oMomEm

Note that this won't show the controls when you start playing. You have to trigger some event for that I guess.

[daslicht]

Thats even less js ! Thank you