HTML5 `<video>` element not playing in Firefox with custom controls - guide with `play()` method
I need some guidance on I'm running into an scenario where my HTML5 `<video>` element fails to play in Firefox when I'm using custom controls. My setup includes a simple video player that I built using the `video` element along with some JavaScript to handle play, pause, and volume controls. The question occurs only in Firefox; the video plays fine in Chrome and Edge. Here's a snippet of my HTML: ```html <video id="myVideo" width="640" height="360" poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> ``` And my JavaScript for handling the play button looks like this: ```javascript const video = document.getElementById('myVideo'); const playBtn = document.getElementById('playBtn'); const pauseBtn = document.getElementById('pauseBtn'); playBtn.addEventListener('click', function() { video.play(); }); pauseBtn.addEventListener('click', function() { video.pause(); }); ``` When I click the play button in Firefox, I see the following behavior in the console: ``` Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. ``` I've ensured that the video source is correct and that the file is accessible from the server. I also tried adding a `muted` attribute to the video tag as suggested in various forums, but that hasn't helped either. My Firefox version is 117.0 (64-bit). I am wondering if there are any specific configurations or best practices that I might be missing to get the custom controls working properly in Firefox. Any help would be appreciated! This is part of a larger service I'm building. Is this even possible? Hoping someone can shed some light on this.