It is worth noting that the Promise won't fulfill until playback has actually started, meaning the code inside the then() will not execute until the media is playing. Look at the Promise returned by the play function to see if it was rejected. Now that we understand the root cause, let's see what we can do to fix this.įirst, don't ever assume a media element (video or audio) will play. Or at least, they do in Google’s latest machine learning experiment, the awe-inspiring Blob Opera, which will see a chorus of four adorable, colorful blobs serenade you with spine-tingling operatic.

You can entirely reset the video playback state, including the buffer, with video.load() and video.src = ''. Note: Calling video.pause() isn't the only way to interrupt a video. Since we're not handling the video play Promise in our code, an error message appears in Chrome DevTools. video.pause() interrupts video loading because it is not ready yet.ay() starts loading video content asynchronously.If playback fails, the Promise is rejected along with an error message explaining the failure.

If playback succeeds, the Promise is fulfilled and the playing event is fired at the same time. Moreover since Chrome 50, a play() call on an a or element returns a Promise, a function that returns a single result asynchronously. _Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().Īs the video is not loaded due to preload='none', video playback doesn't necessarily start immediately after ay() is executed. The code above results in this error message in Chrome DevTools:

Blob opera play