Plyr: Hide controls at the beginning and show them after the video started.

[TheZoker]

I want the player to only show the ['play-large'] when the video is not played and then ['play-large', 'play', 'volume', 'fullscreen', 'progress'] if the video is playing. So just like youtube does it (big play button in the middle and if the user clicks on that and the video plays, then the other controls are shown).
How can I archive that?

I could not find any setters for the controls.

So something like:

const player = new Plyr('#player', {
    controls: ['play-large'],
});
player.on('play', event => {
    player.controls = ['play-large', 'play', 'volume', 'fullscreen', 'progress'];
});

[sp4r74cus]

joining to this request.
its very annoying to see the controls show on player load, then hide and show again when video starts to play.

[benjibee]

This is (at least partially) address by #1115, the resolution being adding a class connected to .plyr.plyr--stopped such as:
css .plyr.plyr--stopped .plyr__controls { display: none }
This would hide everything but the play button, for example. Using this method you could hide anything you wish. Though I agree that this should be a config option.

[Hirbod]

Thanks for that, I also like the CSS approach

[nitaaikumar]

This is (at least partially) address by #1115, the resolution being adding a class connected to .plyr.plyr--stopped such as:

.plyr.plyr--stopped .plyr__controls { display: none }

This would hide everything but the play button, for example. Using this method you could hide anything you wish. Though I agree that this should be a config option.

Actually the above code hides the audio player completely. Had a hard time to figure out why the audio player was not appearing due to this. So this one would be better:

.plyr--video.plyr--stopped .plyr__controls { display: none; }