How to implement crossbrowsed custom controls in video tag?

Question

css

Greetings! Is it possible to get the following result without resorting to magic: it is necessary that in the fullscreen of the video tag only custom controls are shown with the native controls completely disabled (in safari they have one look, in chrome the second, in mozilla the third), YouTube can be an example and other sites with online video viewing. I've tried quite a few ready-made solutions, but they mostly don't work in safari either at all or not the way they should. at the moment I use hls.js and custom play/pause, quality selection and fullscreen disclosure written by myself. also, by the way, I tried, as they say in the guides, to reassign the styles of the user agent - also unsuccessfully ...
in general, the main problems: I can’t hide native controls in safari and display custom ones through z-index.

Answer 1

https://videojs.com/ - I have never seen a better player in my life

Answer 2

Set prefixes
safari just doesn't want to work with flex
https://css-tricks.com/using-flexbox/

Answer 3

Try it