Question

这是一些简单的HTML和Javascript：

<html>
<body>
<video id="video1" width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp444">
  Your browser does not support the video tag.
</video>

<script> 
var myVideo = document.getElementById("video1"); 
var onError = function() {
   if (myVideo.error == null)
   {
       alert('Unknown error'); // crap, only supported in ie
       return;
   }
   if (myVideo.error.code == 1)
   {
       //MEDIA_ERR_ABORTED
       alert(myVideo.error.code + " - fetching prcess aborted by user");
   }
   else if (myVideo.error.code == 2)
   {
       //MEDIA_ERR_NETWORK
       alert(myVideo.error.code + " - error occurred when downloading");
   }
   else if (myVideo.error.code == 3)
   {
       //MEDIA_ERR_DECODE
       alert(myVideo.error.code + " - error occurred when decoding");
   }
   else if (myVideo.error.code == 4)
   {
       //MEDIA_ERR_SRC_NOT_SUPPORTED 
       alert(myVideo.error.code + " - audio/video not supported");
   }
   else
   {
       alert(myVideo.error.code + " - Unknown");
   }
};
myVideo.addEventListener('error', onError, true);
</script> 
</body>
</html>

此代码适用于我测试的所有broswers（IE11，Edge，Chrome，Firefox，Android手机上的Chrome）。

什么不起作用是错误属性。只有IE和Edge告诉我它是哪个代码，所有其他浏览器只是告诉我它是一个未知错误。我认为，这是有道理的，因为它仅在Microsoft产品中受支持：https://www.w3schools.com/tags/av_prop_error.asp

我能做些什么让我更多地描述或理由为什么首先出现错误？

值得注意的是：“video / mp444”的类型是故意输入的。这就是我模拟一种错误的方式。

Answer 1

.addEventListener()的最后一个参数表示是否应在事件提升过程的“ capture ”阶段处理该事件。根据事件的引发位置以及处理事件的位置，捕获/冒泡开始发挥作用。 99.999％的时间，我们想要false那里（IE 8甚至更少甚至不支持捕获），但在这种情况下，事件不会冒泡（记录事件，你会看到{{1 property是bubbles）。

现在，在您的代码中，您正在使用false子元素，并且将在该元素处触发任何错误。如果您想要在更高级别（source祖先元素）处理事件，则必须使用事件捕获，因此您的代码将在video上设置事件侦听器<{1}}的第3个参数使用video值的元素是正确的。

true

但是，假设您只有一个.addEventListener()，则可以删除此元素，并在myVideo.addEventListener('error', onError, true);元素本身上设置source。这允许您直接在将抛出事件的对象上设置事件处理程序，在这种情况下，第三个参数应为src或省略：

video

或：

false

对于您的错误处理函数本身，在DOM标准下，事件处理函数将传递一个引用事件本身的参数，因此您的所有事件处理程序都应准备好接收该参数。但是，该内置事件将不具有您要查找的myVideo.addEventListener('error', onError, false);属性。请改用myVideo.addEventListener('error', onError);。

此外，您可能希望将其重构为code语句，该语句更适合检查许多可能值的单个属性/变量。

mediaElement.error.code

switch

Answer 2

更改原始视频代码：

<html>
<body>
<video id="video1" width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

为：

<html>
<body>  
<video id="video1" width="320" height="240" controls src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

似乎对我有用。我不再通过制作视频/ mp444类型来制作错误。相反，我只是指向一个不存在的视频 - 这让我得到错误代码4.但它现在适用于所有浏览器。 myVideo.error.code有一个值，myVideo.error不再为null。

我要给Scott Marcus带来绿色的复选标记，因为他非常棒。

非Microsoft浏览器 - 如何获取失败的错误代码？

2 个答案: