如何将 HTML5 视频元素伪造为错误以测试错误处理答案

【问题标题】：How to fake a HTML5 video element to error to test error handling如何将 HTML5 视频元素伪造为错误以测试错误处理
【发布时间】：2016-09-25 20:38:59
【问题描述】：

我目前正在开发一个 HTML5 视频播放器并连接了错误事件侦听器，但是到目前为止还没有错误。

有没有办法伪造/模拟错误，以测试它是否正常工作？

也许我可以调用一个方法来强制它出错？

【问题讨论】：

这是一个非常有趣的问题。我想你可以给它一个破碎的 mp4 视频吗？或者，如果您正在流式传输，请切断您的互联网连接。
你在追求什么样的错误？来自您自己的代码或浏览器？（例如不支持 html5 视频）
模拟我想要的任何一种 HTML5 媒体错误代码是理想的，最好是从我自己的代码中，或者同样在浏览器的控制台中。任何一个都会很棒。
Here is a list，要触发这些，您必须手动进行。

标签： javascript html error-handling html5-video

【解决方案1】：

没有在浏览器中模拟错误的方法。您必须自行设置环境以模拟错误（error 和 abort 事件）：

创建两个错误文件：一个有容器错误（截断文件大小），一个有编码错误（十六进制编辑文件并覆盖部分数据）
另外使用指向不存在文件的 URL
设置可以终止文件服务或关闭测试站点的服务器脚本
设置一个可以禁用网络接口的脚本

然后为每个场景运行特定的测试以查看您的代码的行为方式。

可以调度自定义事件，但问题是它不会阻止浏览器加载文件，这意味着您仍然可以获得加载事件等，这将是冲突的。

您可以通过在播放视频时更改视频源来生成 abort 事件 - 这可能是您需要处理的（如果您允许为相同的媒体元素交换源）因为在这种情况下从技术上讲这不是错误。

【讨论】：

【解决方案2】：

我不知道有任何内置方法可以模拟错误。我想您可以创建一个错误事件并将其分派给您的 <source> 元素之一。

function simulateError() {
  // I'm not sure if it would be better to use ErrorEvent()
  // Using Chrome devtools, this gives an error event that appears
  // almost identical to having a source that gets a 404
  var event = new Event('error', {
    'view': window,
    'cancelable': true
  });
  var src = document.getElementById('sourceElement'); 
  src .dispatchEvent(event);
}

另一种方法是遵循@andlrc 的建议：给它一个损坏的视频或切断互联网。来源无效时会报错，你也可以试试。

【讨论】：