这是一些简单的 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
我能做些什么来让我得到更多的描述或原因来说明为什么首先会出现错误？
注意:“video/mp444”的类型是故意键入的。这就是我模拟一种错误类型的方式。
最佳答案
.addEventListener() 的最后一个参数指示是否应在事件引发过程的“ capture ”阶段处理事件。根据引发事件的位置和您想处理事件的位置，捕获/冒泡开始发挥作用。 99.999% 的时候，我们想要 false那里(IE 8 及更低版本甚至不支持捕获)，但在这种情况下，事件不会冒泡(记录事件，您将看到 bubbles 属性为 false )。
现在，在您的代码中，您正在使用 source子元素，任何错误都将在该元素处触发。如果您想在更高级别(video 祖先元素)处理事件，必须使用 事件捕获，因此您在 video 上设置事件监听器的代码使用 true 的元素.addEventListener() 的第三个参数的值会是正确的。
myVideo.addEventListener('error', onError, true);
但是，鉴于您只有一个 source ，您可以删除此元素并设置 src在 video 上元素本身。这允许您直接在将抛出事件的对象上设置事件处理程序，在这种情况下，第三个参数应该是 false。或省略:
myVideo.addEventListener('error', onError, false);
或:
myVideo.addEventListener('error', onError);
至于您的错误处理函数本身，在 DOM 标准下，事件处理函数将被传递一个引用事件本身的参数，因此您的所有事件处理程序都应该准备好接收该参数。但是，该内置事件不会有 code您正在寻找的属性(property)。使用 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>关于javascript - 非 Microsoft 浏览器 - 如何获取失败的错误代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44890649/