HTMLVideoElement load() 抛出无法捕获的 DOMException

Question

以下代码有时会在 Firefox 中引发异常：

try {
  videoElem.load();
} 
catch (ignored) {}

错误：

未捕获（承诺中）DOMException：用户代理应用户请求中止了媒体资源的获取过程。

我认为这与 Firefox 在页面不可见时不加载视频有关，以节省资源。这是有道理的，但我想捕获异常并继续执行我的代码。

该语句已经在 try catch 中，但仍然未捕获异常。 load() 不返回承诺。我如何捕捉这个错误？

Answer 1

这看起来像是 Firefox 的错误。

我可以重现这一点：首先使用慢速网络加载视频。当视频仍在加载时，单击

<video>

的控件 UI 中的播放图标。然后执行OP的代码。

这对我来说，罪魁祸首是 UI，它可能确实在视频元素上调用了

HTMLMediaElement.prototype.play()

的等效项，但在出现错误时不会捕获。

（据我所知）没有办法捕获该 UI 上的实际点击事件。然而，监听 play 事件 为我们带来了正确的位置，可能会很有用，具体取决于您计划如何处理该问题。

我们实际上可以通过监听全局 unhandledrejection 事件来捕获该拒绝，但与其他此类事件不同，阻止此事件并不会阻止其消息显示在控制台中......而且我找不到另一种方法为此，当

load()

 为 

networkState 时，除了不调用

NETWORK_LOADING

之外，但这可能不是您想要的。

我们还可以通过监听 abort 事件来检测这种情况的发生，在这种情况下，该事件也会在其他浏览器中触发。

const vid = document.querySelector("video");

vid.addEventListener("play",  (evt) => {
  vid.load();
}, { once: true });

// Catch it like any other unhandled promise rejection
addEventListener("unhandledrejection", (evt) => {
  console.log(evt.reason);
  evt.preventDefault(); // does not prevent the message in the console...
});

// We can also know that something went bad from here
vid.addEventListener("abort", e => console.log("aborted"));

<h4>Click the play icon of the below &lt;video> in less than 5s</h4>
<video controls>
  <source src="https://app.requestly.io/delay/5000/https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm?">
</video>

可以说，在控制台中显示该错误消息可能仍然有用，因为 something 进展不顺利，但是能够在 unhandledrejection 中捕获它，同时无法阻止错误消息似乎是错误的，所以你可能想提出一个问题。