Web video player errors All In One
errors
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
video.play(); // <-- This is asynchronous!
video.pause();
</script>
solutions
Autoplay
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
Play & Pause
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video... ✅
video.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
demos
Fetch & Play
<video id="video" src=""></video>
<button id="button"></button>
button.addEventListener('click', onButtonClick);
function onButtonClick() {
// This will allow us to play video later...
video.load();
fetchVideoAndPlay();
}
function fetchVideoAndPlay() {
fetch('https://example.com/file.mp4')
.then(response => response.blob())
.then(blob => {
// blob ✅
video.srcObject = blob;
// Promise
return video.play();
})
.then(_ => {
// Video playback started ;)
})
.catch(e => {
// Video playback failed ;(
})
}