HTML5视频错误处理

我需要告诉你，视频是否不能播放（浏览器中显示“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
            }
        }

这里出了什么问题？

对于

用“错误”代替

---

有关

事件的完整列表，请转到此处：

尝试将事件侦听器添加到标记中-我认为onerror属性（“error”event）现在对源标记有效，而不是对视频标记有效。

要捕获错误事件，应使用

video.addEventListner（）

：

请注意，

addEventListener

（捕获时）的第三个参数应设置为true。错误事件通常从视频元素（标记）的后代触发

无论如何，依靠视频标签触发

错误

事件并不是检测视频是否播放的最佳策略。某些android和iOS设备上不会触发此事件

---

我能想到的最可靠的方法是听

timeupdate

和

end

事件。如果正在播放视频，您将获得至少3个timeupdate事件。如果出现错误，

结束

将比

错误

更可靠地触发，从Firefox4开始，“错误”事件将被触发

您应该在唯一/最后一个源上添加错误处理程序：

HTML JQuery 安格拉斯 您可以创建错误处理指令（或仅使用）：

---

很高兴知道Chrome和Firefox有不同的

onerror

回调。因此，必须映射错误。Mozilla使用

下面是一个关于如何使用纯JavaScript的示例：

const file='1〕https://samples.ffmpeg.org/MPEG-4/MPEGSolution_jurassic.mp4';
fetch（文件，{mode:'no cors'}）
.then（（response）=>response.blob（））
.然后（（blob）=>{
constURL=window.url.createObjectURL（blob）；
const video=document.createElement（'video'）；
video.addEventListener（'错误'，（事件）=>{
让错误=事件；
//铬v60
if（event.path&&event.path[0]）{
错误=事件。路径[0]。错误；
}
//火狐v55
if（event.originalTarget）{
error=error.originalTarget.error；
}
//下面是错误消息
警报（`Video error:${error.message}`）；
window.URL.revokeObjectURL（URL）；
}，对）；
video.src=url；
文件.正文.附件（视频）；
});哈巴狗示例

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'; }

你知道在FireFox中把它绑定到哪里吗？我试图用Chrome捕捉一个不播放的视频（404或错误格式），没问题，但FireFox拒绝让我控制错误…其返回未定义，我建议使用jQuery
$（'video'）[0]。addEventListener
…链接不再包含“error”一词我很难找到关于这个的任何信息。这绝对是一个更完整的答案！解决了我在处理错误时需要更多详细信息的问题：）请注意，任何使用标准
结构的人，错误实际上都会发生在@KennyKi共享的
源
元素上。我也无法从源错误中获取错误信息（在Chrome79.0、Safari13.0和Firefox71.0上测试）
var video = document.createElement('video');
var onError = function() { // your handler};
video.addEventListener('error', onError, true);
...
// remove listener eventually
video.removeEventListener('error', onError, true);

<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');
});

<video id="vid" controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <source src="otherdynamicsearch.avi" type="video/avi" ng-error="handleError()"></source>
</video>

element.on('error', function(event) {
    scope.$apply(function() {
        fn(scope, {$event:event});
    });
});

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'; }