DOMException - play() 请求中断

François Beaufort
François Beaufort
GitHub

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

或

那么您来对地方了。别担心。我会说明导致此问题的原因以及解决方法。

导致此问题的原因

下面的 JavaScript 代码会重现您看到的“Uncaught (in promise)”错误：

错误做法
<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 承诺支持

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

危险区域

<video> 中的 <source> 会使 play() 承诺永不拒绝

对于 <video src="not-existing-video.mp4"\>，由于视频不存在，play() 承诺会按预期遭拒。对于 <video><source src="not-existing-video.mp4" type='video/mp4'></video>，play() promise 永远不会拒绝。只有在没有有效来源时，才会出现这种情况。

Chromium bug