Html HTML5 视频错误处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5573461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video error handling
提问by AntonAL
I need to tell, whether video cannot be played ("x" sign is shown in browser).
我需要告诉，是否无法播放视频（浏览器中显示“x”符号）。
This code does't works. "onerror" event will never be fired under Firefox
此代码不起作用。在 Firefox 下永远不会触发“onerror”事件
var v = document.getElementsByTagName("video")[0];
if ( v != undefined )
v.onerror = function(e) {
if ( v.networkState == v.NETWORK_NO_SOURCE )
{
// handle error
}
}
What's wrong here ?
这里有什么问题？
回答by therealklanni
"onerror" is not a valid event type for <video>
“onerror”不是有效的事件类型 <video>
Use "error" instead.
改用“错误”。
document.getElementsByTagName('video')[0].addEventListener('error', function(event) { ... }, true);
For a complete list of events for <video>go here: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
如需完整的活动列表，<video>请访问：https: //developer.mozilla.org/En/Using_audio_and_video_in_Firefox
回答by Kenny Ki
From Firefox 4 onwards, the 'error' event is dispatched on the <source>element.
从 Firefox 4 开始，'error' 事件被分派到<source>element 上。
And you should add an error handler on the only/last source:
您应该在唯一/最后一个源上添加一个错误处理程序：
HTML
HTML
<video id="vid" controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<source src="otherdynamicsearch.avi" type="video/avi"></source>
</video>
JS
JS
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');
});
}
JQuery
查询
$('video source').last().on('error', function() {
alert('uh oh');
});
AngularJS
AngularJS
You can create an error handling directive (or just use ng-error):
您可以创建错误处理指令（或仅使用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>
Where the error handling directive's linkfunction should do (copied from ng-error):
错误处理指令的link功能应该在哪里（从 ng-error 复制）：
element.on('error', function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
回答by Benny Neugebauer
It's good to know that Chrome and Firefox have different onerrorcallbacks. The error must therefore be mapped. Mozilla uses error.originalTarget.
很高兴知道 Chrome 和 Firefox 有不同的onerror回调。因此必须映射错误。Mozilla 使用error.originalTarget。
Here is a sample on how to do it with pure JavaScript:
以下是有关如何使用纯 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);
});The above example maps an incoming error event into a MediaErrorwhich can be used to display an error playback message.
上面的示例将传入的错误事件映射到MediaError 中，该事件可用于显示错误播放消息。
回答by Ale? Kotnik
To catch error event, you should use video.addEventListner():
要捕获错误事件，您应该使用video.addEventListner()：
var video = document.createElement('video');
var onError = function() { // your handler};
video.addEventListener('error', onError, true);
...
// remove listener eventually
video.removeEventListener('error', onError, true);
Note that the 3rd parameter of addEventListener(on capture) should be set to true. Error event is typically fired from descendatns of video element ( tags).
请注意，addEventListener（捕获时）的第三个参数应设置为 true。错误事件通常是从视频元素（标签）的后代触发的。
Anyway, relying on video tag to fire an errorevent is not the best strategy to detect if video has played. This event is not fired on some android and iOS devices.
无论如何，依靠视频标签来触发error事件并不是检测视频是否已播放的最佳策略。在某些 android 和 iOS 设备上不会触发此事件。
The most reliable method, I can think of, is to listen to timeupdateand endedevents. If video was playing, you'll get at least 3 timeupdate events. In the case of error, endedwill be triggered more reliably than error.
我能想到的最可靠的方法是监听timeupdate和ended事件。如果正在播放视频，您将获得至少 3 个时间更新事件。在错误的情况下，ended将比 更可靠地触发error。
回答by ccallendar
Try adding the event listener to the tag instead - I think the onerror attribute ("error" event) works on the source tag now, not the video tag.
尝试将事件侦听器添加到标签中 - 我认为 onerror 属性（“error”事件）现在适用于源标签，而不是视频标签。
回答by ?ubomír Drinka
Pug example
哈巴狗示例
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'; }
