Javascript：如何捕获在video.play（）中加载视频的错误？

Question

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
  }
];

以下是结果的屏幕截图：

Answer 1

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

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

我更新了代码笔，在视频中添加了一个包含多个源元素的示例。由于视频元素是为尝试多种元素而设计的，因此您应该仅侦听最后一个来源元素的错误（或者在将来源数量匹配之前，可能会累计错误，我还没有验证是否可以自上而下地进行验证）。

@AdamH在指向其他帖子的评论中提供了有用的信息：https://stackoverflow.com/a/33471125/376489