The cause:

What I can see from your code is the video is not loaded because of preload="none". After 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 <video> or <audio> element , which is a synchronous function that gives a single result. The Promise is executed and the playing event 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:

1. video.play() begins to load video content asynchronously.
2. video.pause() discontinues video loading due to it has not ready yet.
3. video.play() refuses asynchronously.

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.

Solution:

A media element (video or audio) will never play. Let’s check whether the Promise returned by the play function 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:

Autoplay example:

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
// Display loading animation.
var playPromise = video.play();

if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback has already started!
// Show playing UI.
})
.catch(error => {
// Automatic play was stopped
// Show paused UI.
});
}
</script>

Play & Pause example

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
// Display loading animation.
var playPromise = video.play();

if (playPromise !== undefined) {
playPromise.then(_ => {
// Playback has started automatically!
// Show playing UI.
// Now you can pause video safely...
video.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>

Fetch & Play example:

<video id="video"></video>
<button id="button"></button>

<script>
button.addEventListener('click', onButtonClick);

function onButtonClick() {
// This will permit you to play video later...
video.load();
fetchVideoAndPlay();
}

function fetchVideoAndPlay() {
fetch('https://example.com/file.mp4')
.then(response => response.blob())
.then(blob => {
video.srcObject = blob;
return video.play();
})
.then(_ => {
// Video playback started ;)
})
.catch(e => {
// Video playback failed ;(
})
}
</script>