前端生涯

解决新版本 Chrome 提示
大概在一些新版本的浏览器中，我们是用 audio 或者 video 进行媒体资源播放的时候，可能会在控制台看到这个输出:

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

or

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>

上面的代码会造成下面的异常错误:

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

上面的 video 的 设置了 preload = 'none' ，视频并没有提前加载，因此在触发 video.play() 并不能立即播放。

从 Chrome 50 的版本后 触发 video.play 会返回一个 Promise 对象 ，如果播放成功，则 Promise 会触发，然后 playing 事件同时也会触发。如果播放失败，则会触发 Promise 的 reject,参数会带有错误的信息。
现在触发的顺序：

video.play() 异步的去加载 video 内容，
video.pause() 中断视频的加载，因为视频并没有就绪
video.play() 异步的 rejects

因为我们并没有处理 video.play 的 Promise ，然后一个错误的信息会暴露出来。

video.pause() 不光会打断一个视频的播放，而且会完全重置一个视频的播放的状态，包括 buffer 和 video.load这些

修复

<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script> // Show loading animation.
var playPromise = video.play();

if (playPromise !== undefined) {
playPromise.then(_ => {
// 这个时候可以安全的暂停
video.pause();
})
.catch(error => {

});
}
</script>

如今现在 HTMLMediaElement.play() 支持返回 Promise 已经在 Chrome, Firefox, Opera, 以及 Safari Edge 实现了。

In modern versions of Chrome, you can’t have videos autoplay with sound enabled by default.
You need to add the muted property to your HTML5 <video> tag:
muted="muted"

REFERENCE: 解决新版本 Chrome 提示 DOMException: The play() request was interrupted