HTML5 video tag not playing in Safari with custom controls
I'm stuck on something that should probably be simple. I'm maintaining legacy code that I've been banging my head against this for hours... I'm having an scenario with the `<video>` tag in HTML5 where the video plays fine in Chrome and Firefox, but it doesn't play at all in Safari (version 16.1). I've set up custom controls using JavaScript, but it seems like the play function isn't being triggered in Safari. Here's the relevant HTML and JavaScript code: ```html <video id="myVideo" width="600" controls="false"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <button id="playButton">Play</button> <button id="pauseButton">Pause</button> ``` ```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 in Safari, I get the following behavior in the console: `Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.` I've tried adding a `load()` before calling `play()`, but that doesn't seem to solve the scenario. The video file is accessible and works fine otherwise. Any ideas on how to resolve this question, or what might be causing this behavior specifically in Safari? My development environment is Windows. Any help would be greatly appreciated! Hoping someone can shed some light on this. I'd really appreciate any guidance on this. I'm using Html LTS in this project. I'd really appreciate any guidance on this.