我需要说明，视频是否无法播放（“x”符号在浏览器中显示）。
此代码不起作用。 Firefox 下永远不会触发“onerror”事件
var v = document.getElementsByTagName("video")[0];
if ( v != undefined )
v.onerror = function(e) {
if ( v.networkState == v.NETWORK_NO_SOURCE )
{
// handle error
}
}
这里有什么问题？
【问题讨论】：
标签： html error-handling html5-video
“onerror”不是<video> 的有效事件类型
改用“错误”。
document.getElementsByTagName('video')[0].addEventListener('error', function(event) { ... }, true);
有关<video> 的完整活动列表，请访问：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
【讨论】：
$('video')[0].addEventListener...
从 Firefox 4 开始，'error' 事件是dispatched on the <source> element。
您应该在唯一/最后一个来源上添加一个错误处理程序：
<video id="vid" controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<source src="otherdynamicsearch.avi" type="video/avi"></source>
</video>
var v = document.querySelector('video#vid');
var sources = v.querySelectorAll('source');
if (sources.length !== 0) {
var lastSource = sources[sources.length-1];
lastSource.addEventListener('error', function() {
alert('uh oh');
});
}
$('video source').last().on('error', function() {
alert('uh oh');
});
您可以创建一个错误处理指令（或只使用ng-error）：
<video id="vid" controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<source src="otherdynamicsearch.avi" type="video/avi" ng-error="handleError()"></source>
</video>
错误处理指令的 link 函数应该在哪里（从 ng-error 复制）：
element.on('error', function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
【讨论】：
很高兴知道 Chrome 和 Firefox 有不同的 onerror 回调。因此必须映射错误。 Mozilla 使用error.originalTarget。
这是一个关于如何使用纯 JavaScript 进行操作的示例：
const file = 'https://samples.ffmpeg.org/MPEG-4/MPEGSolution_jurassic.mp4';
window.fetch(file, {mode: 'no-cors'})
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob);
const video = document.createElement('video');
video.addEventListener('error', (event) => {
let error = event;
// Chrome v60
if (event.path && event.path[0]) {
error = event.path[0].error;
}
// Firefox v55
if (event.originalTarget) {
error = error.originalTarget.error;
}
// Here comes the error message
alert(`Video error: ${error.message}`);
window.URL.revokeObjectURL(url);
}, true);
video.src = url;
document.body.appendChild(video);
});以上示例将传入的错误事件映射到MediaError，可用于显示错误回放消息。
【讨论】：
<video><source … /></video> 结构的人，错误实际上会发生在@KennyKi 共享的source 元素上。我也无法从源错误中获取错误信息（在 Chrome 79.0、Safari 13.0 和 Firefox 71.0 上测试）
要捕获错误事件，您应该使用video.addEventListener():
var video = document.createElement('video');
var onError = function() { // your handler};
video.addEventListener('error', onError, true);
...
// remove listener eventually
video.removeEventListener('error', onError, true);
请注意，addEventListener（捕获时）的第三个参数应设置为 true。错误事件通常由视频元素（标签）的后代触发。
无论如何，依靠视频标签触发error 事件并不是检测视频是否已播放的最佳策略。此事件不会在某些 android 和 iOS 设备上触发。
我能想到的最可靠的方法是监听timeupdate 和ended 事件。如果视频正在播放，您将获得至少 3 个 timeupdate 事件。在出错的情况下，ended 将比error 更可靠地触发。
【讨论】：
尝试将事件侦听器添加到标签中 - 我认为 onerror 属性（“错误”事件）现在适用于源标签，而不是视频标签。
【讨论】：
哈巴狗示例
video(src= encodeURI(item.urlVideo), type='video/mp4' onerror="myFunction('param',this)")
script(src='/javascripts/onerror.js')
function myFunction(param, me) {
console.log(me);
me.poster = './images/placeholder.jpg'; }
【讨论】：