How can I have different look for initial play?

[ADTC]

In the initial state, I want to show a big Play button in the Center of video frame with no other controls.

Once clicked, the video should start playing, and henceforth the control bar with small play/pause button should appear. The big Play button should not appear again even if the video is paused or scrubbed to the beginning.

Is this possible? The docs are sparse when it comes to this kind of custom functionality.

[luwes]

this is definitely possible! have a look at this example for a center play button.
https://codesandbox.io/p/sandbox/media-chrome-cloudflare-video-element-g9jvzg?file=%2Findex.html%3A33%2C31

that will give you a good start. then it's a matter of hiding the media-control-bar on page load so maybe give that a default opacity of 0. the media-controller has an attribute called mediahasplayed that could be used to fade in the media-control-bar. something like the following CSS. (didn't test)

media-controller media-control-bar {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

media-controller[mediahasplayed] media-control-bar {
  opacity: 1;
}

[ADTC]

Thanks. We didn't need to do it, but this is good to know.