标签：视频 play DOMException 中断 pause promise video 播放

DOMException - play() 请求中断

bookmark_border  

 

François Beaufort GitHub

 

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

注意 ：未捕获（承诺中）DOMException：play() 请求因调用 pause() 而中断。

或

注意：未捕获（在承诺中）DOMException：play() 请求被新的加载请求中断。

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

导致此错误的原因

下面的一些 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 开发者工具中显示一条错误消息。

注意 ：调用 video.pause() 并不是中断视频的唯一方式。您可以使用 video.load() 和 video.src = '' 完全重置视频播放状态，包括缓冲区。

解决方法

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

首先，不要假设系统会播放媒体元素（视频或音频）。查看 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>

警告：请勿将 onButtonClick 函数与 async 关键字异步。您将失去稍后播放视频所需的“用户手势令牌”。

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 错误

该内容对您有帮助吗？

标签：视频,play,DOMException,中断,pause,promise,video,播放
From： https://www.cnblogs.com/sexintercourse/p/17948202