HTML5 video playback implementing custom controls in Safari 16.4
I'm experiencing a question with HTML5 video playback when using custom controls in Safari 16.4. The video element plays perfectly in Chrome and Firefox, but in Safari, the custom controls are unresponsive, and the video does not pause when I click the pause button. I used the following code for my video setup: ```html <video id="myVideo" controls="false"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div id="customControls"> <button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> </div> ``` And the accompanying JavaScript is: ```javascript const video = document.getElementById('myVideo'); const playBtn = document.getElementById('playBtn'); const pauseBtn = document.getElementById('pauseBtn'); playBtn.addEventListener('click', () => { video.play(); }); pauseBtn.addEventListener('click', () => { video.pause(); }); ``` In Safari, when I click the play button, I get a console behavior: `Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().` I have tried adding `video.load()` before calling `video.play()` but it didn't resolve the scenario. I also ensured that the video file is accessible and correctly served. Is there a known limitation with custom controls in Safari, or is there something else I might be overlooking? Any insights would be greatly appreciated!