plyr: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

I use pretty javascript code solve it:

video.src = 'xxx';
video.load();
setTimeout(function() {
    video.play();
}, 0);

I would like to reopen this because the aforementioned Chrome issue says the error is fixed for when calling HTMLMediaElement.pause before HTMLMediaElement.play, but calling HTMLMediaElement.play and then HTMLMediaElement.pause while the media is loading still throws the error.

// fixed
media.pause();
media.play();

// won't fix; still shows the issue.
media.play();
media.pause();

HTMLMediaElement.play is async and returns a promise. The error complains about having called HTMLMediaElement.pause before the playback started.

I would like to quote to the Chromium issue owner:

This has been resolved a long time ago. If you are seeing an error but that your website otherwise behave exactly the same, this is not a bug in Chrome but in your website. If you are seeing an error in the console and your website stopped behaving properly, please file another bug with a test page.

In this case, everything behaves exactly the same and it won’t get fixed by the Chromium team because the call to HTMLMediaElement.play returns a promise that gets resolved when the media element is ready to play. At that point, the call to HTMLMediaElement.pause can be made. Since we rely on Plyr to handle HTMLMediaElement, it should either know about the promise returned by HTMLMediaElement.play and smartly call HTMLMediaElement.pause when it’s resolved, or at least provide a way to interact with the promise by returning it when calling plyr.play. I tried to look at plyr.isPaused() and plyr.getMedia().paused in order to work around it myself, but they’re false even though they didn’t start playing yet because of buffering. I also tried to use plyr.getMedia().play() instead of plyr.play() in order to get the promise and then always call pause/stop when the promise resolves, but eventually, I get the error again, so maybe I’m missing something. I think that Plyr could keep a track of this promise internally so that users don’t need to worry about this issue.

From html video TAG remove autoplay and use this code to play. hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, function () { video.play(); }); hls.on(Hls.Events.ERROR, function (event, data) { if (data.fatal) { switch (data.type) { case Hls.ErrorTypes.NETWORK_ERROR: // try to recover network error console.log("fatal network error encountered, try to recover"); hls.startLoad(); break; case Hls.ErrorTypes.MEDIA_ERROR: console.log("fatal media error encountered, try to recover"); hls.recoverMediaError(); break; default: // cannot recover hls.destroy(); break; } } });

Hi there, this can’t be fixed at our end, this is problem when the source is still loading and pause/destroy is called (event if the plyr container is removed from dom - chrome indicates pause event).

Only solution is to catch promise in the play/pause (this can be only done in plyr source). Martin.

I’m not able to solve this problem when there are multiple video elements on the screen. The error seems to trigger when I call .play() on one while the previous one is still loading.

There is a workaround, not pretty but it should work: http://stackoverflow.com/questions/36803176/how-to-prevent-the-play-request-was-interrupted-by-a-call-to-pause-error

This seems to be a Chrome issue by the looks of things: https://bugs.chromium.org/p/chromium/issues/detail?id=593273

Just wanted to mention that for me, @lichenbuliren’s solution didn’t work (the error still showed).

This worked for me instead:

video.pause();
video.addEventListener("canplay", function onCanPlay() {
	video.removeEventListener("canplay", onCanPlay);
	video.play();
});
video.load();

Is there any update on this issue? I still get the error “Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().” Trying to use the Promise function to handle this gives ‘playPromise.then is not a function’ error. Any suggestion would help.