Javascript：如何捕获在 video.play() 中加载视频的错误？答案

【问题标题】：Javascript: how to catch errors loading videos in video.play()?Javascript：如何捕获在 video.play() 中加载视频的错误？
【发布时间】：2019-12-20 20:07:01
【问题描述】：

MDN docs on video.play 详细说明了它如何在现代浏览器中返回 Promise，并且如果视频无法播放，它将被拒绝。

在我的测试中，我发现这在不播放视频时效果很好，因为自动播放政策问题，例如没有被静音，但是，我也看到它确实如果视频 404 的 URL 或内容类型错误，则不会被拒绝。

有没有办法捕捉这样的加载错误？或者这会是对 Chrome、Firefox、Safari 等的功能请求吗？

我这里有一个示例代码笔：https://codepen.io/mrcoles/pen/abzJPaQ

在其中，我根据以下配置生成视频：

const ROWS = [
  {
    title: 'Video URL is good',
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    muted: true
  },
  {
    title: 'Video URL is a 404',
    src: '/DOES-NOT-EXIST.mp4',
    muted: true
  },
  {
    title: 'Video URL is a bad source type (HTML page instead of video)',
    src: 'https://www.example.com/',
    muted: true
  },
  {
    title: 'Video URL is good, but not muted',
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    muted: false
  }
];

这是结果的截图：

【问题讨论】：

您应该在onerror 事件中连接您的错误处理程序。 Here 是关于附加到该事件的帖子。
太好了，谢谢@AdamH！在一些初步测试中，我将它附加到video，但我在您发布的链接中看到浏览器现在在source 元素上抛出错误（应该在最后一个元素上检查）。

标签： javascript html5-video

【解决方案1】：

加载文件失败需要通过将“错误”事件附加到视频内的源元素（或者如果直接在视频上指定 src 而没有源元素，则可能是视频）来单独观看。

sourceElt.addEventListener('error', evt => {
  console.log('Error');
});

我更新了我的 codepen，在视频中添加了一个包含多个源元素的示例。由于视频元素是为尝试多个元素而构建的，因此您应该只侦听最后一个源元素上的错误（或者可能在匹配源数之前对错误求和——我尚未验证事情是否可以自上而下运行）。

@AdamH 在 cmets 中提供了有用的信息，指向另一个帖子：https://stackoverflow.com/a/33471125/376489

【讨论】：