On my site, when viewed on a desktop browser, clicking on a video will play or pause that video. However, on mobile browsers, the behavior is very inconsistent. Clicking or tapping on a video will only sometimes start it, and never pause it. Oddly, this inconsistent behavior happens even when simulating a mobile browser in the desktop browser's developer mode!

How can I get consistent click-to-play/pause behavior on all devices and platforms? I want a click/tap to always play a paused video, and always pause a playing video.

I am using a combination of some html5 video elements and some video elements wrapped via video.js. I need a solution that will work for both types. All videos show controls, if that matters. I'm aware that there are 2 or 3 fairly similar questions on SE, but they are all very old and none have answers that appear to work in 2022.