DOMException - play() 请求中断

François Beaufort
François Beaufort
GitHub

您是否刚刚在 Chrome 开发者工具 JavaScript 控制台中发现了这个意外的媒体错误？

或

那你来对地方了。别担心，我会说明导致此错误的原因以及解决方法。

导致此问题的原因

以下一些 JavaScript 代码可重现您看到的“未捕获（有保证）”错误：

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

<script>
  video.play(); // <-- This is asynchronous!
  video.pause();
</script>

上面的代码会导致 Chrome 开发者工具中出现以下错误消息：

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

由于视频因 preload="none" 而未加载，因此在执行 video.play() 后，视频播放不一定会立即开始播放。

此外，自 Chrome 50 起，对 <video> 或 <audio> 元素的 play() 调用会返回一个 Promise，即异步返回单个结果的函数。如果播放成功，系统会实现 Promise，并同时触发 playing 事件。如果播放失败，promise 将被拒绝，并提供一条说明失败的错误消息。

现在会发生以下情况：

  1. video.play() 开始异步加载视频内容。
  2. “video.pause()”尚未准备就绪，会中断视频加载。
  3. video.play() 以异步方式大声拒绝。

由于我们的代码中没有处理视频播放 Promise，因此 Chrome 开发者工具中显示一条错误消息。

解决方法

了解了根本原因后，让我们来看看如何解决此问题。

首先，不要假定媒体元素（视频或音频）会播放。查看 play 函数返回的 Promise，查看该函数是否被拒绝。值得注意的是，在播放实际开始播放之前，Promise 不会执行，这意味着，在播放媒体之前，then() 内的代码不会执行。

正确做法

示例：自动播放

<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(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>
正确做法

示例：播放和暂停

<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(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

这个简单的示例非常棒，但如果使用 video.play() 能够在稍后播放视频，该怎么办呢？

我告诉你个秘密。您无需使用 video.play()，也可以使用 video.load()，具体方法如下：

正确做法

示例：提取并播放

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

<script>
  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 => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }
</script>

Play promise 支持

在撰写本文时，HTMLMediaElement.play() 会在 Chrome、Edge、Firefox、Opera 和 Safari 中返回一个 promise。

危险区域

<video> 中的 <source> 使 play() promise 永远不会拒绝

对于 <video src="not-existing-video.mp4"\>，play() promise 会按预期拒绝，因为视频不存在。对于 <video><source src="not-existing-video.mp4" type='video/mp4'></video>，play() promise 绝不会拒绝。仅当没有有效来源时，才会发生这种情况。

Chromium 错误