这里有一些简单的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>
这段代码在我测试过的所有浏览器(IE11，Edge，Chrome，Firefox，我的Android手机上的Chrome(中都可以正常工作。
不起作用的是错误属性。 只有IE和Edge告诉我这是哪个代码，而所有其他浏览器只是告诉我这是一个未知错误。 我想这是有道理的，因为它仅在Microsoft产品中受支持：https://www.w3schools.com/tags/av_prop_error.asp
我能做些什么来让我对为什么首先出现错误有更多的描述或理由？
注意："视频/mp444"的类型是故意输入的。 这就是我模拟一种错误的方式。
.addEventListener()的最后一个参数指示是否应在事件引发过程的">捕获"阶段处理事件。 根据事件的引发位置以及您要处理事件的位置，捕获/冒泡会发挥作用。99.999% 的时间，我们希望在那里false(IE 8 及更低版本甚至不支持捕获(，但在这种情况下，事件不会冒泡(记录事件，您将看到bubbles属性是false(。
现在，在您的代码中，您使用的是source子元素，任何错误都将在该元素上触发。如果要在更高级别(video祖先元素(处理事件，则必须使用事件捕获，因此在video元素上设置事件侦听器的代码是正确的，该元素使用true值来.addEventListener()第三个参数。
myVideo.addEventListener('error', onError, true);
但是，鉴于您只有一个source，您可以消除此元素，只需在video元素本身上设置src。这允许您直接在将引发事件的对象上设置事件处理程序，在这种情况下，应false或省略第三个参数：
myVideo.addEventListener('error', onError, false);
或：
myVideo.addEventListener('error', onError);
至于你的错误处理函数本身，在 DOM 标准下，事件处理函数将被传递一个引用事件本身的参数，所以你的所有事件处理程序都应该准备好接收该参数。但是，该内置事件将不具有要查找的code属性。请改用mediaElement.error.code。
此外，您可能希望将其重构为switch语句，该语句更适合检查多个可能值的单个属性/变量。
var myVideo = document.querySelector("#video1");
myVideo.addEventListener('error', onError);
function onError(evt) {
var message = "";
// The normal error event will not contain the error code
switch (myVideo.error.code) {
case null:
message = 'Unknown error'; // crap, only supported in ie
break;
case 1:
//MEDIA_ERR_ABORTED
message = " - fetching process aborted by user";
break;
case 2:
//MEDIA_ERR_NETWORK
message = " - error occurred when downloading";
break;
case 3:
//MEDIA_ERR_DECODE
message = " - error occurred when decoding";
break;
case 4:
//MEDIA_ERR_SRC_NOT_SUPPORTED
message = " - audio/video not supported";
break;
default:
message = " - Unknown";
break;
}
console.log(myVideo.error.code + message);
};<video id="video1" width="320" height="240" controls src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>将我的原始视频标签从：
<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 不再为空。
我要给斯科特·马库斯打上绿色复选标记，因为他的出色表现。