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

解决新版本 Chrome 提示

DOMException: The play() request was interrupted

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

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>

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

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 实现了。