. Advertisement .
. Advertisement .
Hey geys! I’m back here. I’m having the error ”uncaught (in promise) DOMException: The play() request was interrupted by a new load request” while I running this code:
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> video.play(); // <-- Here is asynchronous! video.pause(); </script>
Then it gives me an error warning:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Does anyone know how to fix it? Please write your suggestions below. Thanks!
What I can see from your code is the video is not loaded because of
video.play()is executed, you don’t need to start video playback immediately. Furthermore, since Chrome 50, promise is returned by a
play()call on a
<audio>element , which is a synchronous function that gives a single result. The Promise is executed and the
playingevent is activated at the same moment if playback succeeds. The playback is not successful, so the Promise is refused and the error is displayed.
Below’s what is happening in your code:
video.play()begins to load video content asynchronously.
video.pause()discontinues video loading due to it has not ready yet.
An error warning comes in Chrome DevTools because you don’t handle the video play Promise in your code.
These are the reasons of your error.
A media element (video or audio) will never play. Let’s check whether the Promise returned by the
playfunction is denied or not. Notes that the Promise will not finish until playback has actually started, it means that the code within the
then()will not run until the media starts to play. You can refer to my examples below:
Play & Pause example
Fetch & Play example:
thanks it worked!