implementing Custom HTML5 Video Controls Not Firing Events in Safari 16.0
I'm upgrading from an older version and I'm trying to implement a custom video player using HTML5 `<video>` element and JavaScript, but I've hit a snag with Safari 16.0. My custom controls are not registering click events, which is causing the play/pause functionality to unexpected result. The same setup works perfectly in Chrome and Firefox. Here's the code I have: ```html <video id="myVideo" width="640" height="360" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="custom-controls"> <button id="playButton">Play</button> <button id="pauseButton">Pause</button> </div> ``` And my JavaScript looks like this: ```javascript const video = document.getElementById('myVideo'); const playButton = document.getElementById('playButton'); const pauseButton = document.getElementById('pauseButton'); playButton.addEventListener('click', () => { video.play(); }); pauseButton.addEventListener('click', () => { video.pause(); }); ``` When I click the Play button, nothing happens in Safari, but in Chrome and Firefox, the video plays as expected. I’ve checked the console for errors and there are none, but I noticed that the `video.play()` method returns a promise in Safari. I’m not sure if that’s part of the scenario. Additionally, I've tried adding `video.muted = true;` before calling `video.play();` to comply with Safari's autoplay policies, but it didn't change the behavior. Have I missed something specific to Safari that I need to account for? Any insights on making custom controls work seamlessly across all browsers would be greatly appreciated! Cheers for any assistance! The project is a service built with Javascript. Any ideas how to fix this?