Question

我需要告诉你，视频是否无法播放（浏览器中会显示“x”符号）。

此代码无效。 “onerror”事件永远不会在Firefox下被解雇

var v = document.getElementsByTagName("video")[0];
    if ( v != undefined )
        v.onerror = function(e) {
            if ( v.networkState == v.NETWORK_NO_SOURCE )
            {
                // handle error
            }
        }

这里有什么问题？

Answer 1

“onerror”不是<video>

的有效事件类型

改为使用“错误”。

document.getElementsByTagName('video')[0].addEventListener('error', function(event) { ... }, true);

有关<video>的完整事件列表，请转到此处：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

Answer 2

从Firefox 4开始，“错误”＃39;事件是dispatched on the <source> element。

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

HTML

<video id="vid" controls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <source src="otherdynamicsearch.avi" type="video/avi"></source> </video>

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

您可以创建错误处理指令（或只使用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}); }); });

Answer 3

要捕获错误事件，您应该使用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);

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

无论如何，依靠视频标记来发起error事件并不是检测视频是否播放的最佳策略。在某些Android和iOS设备上不会触发此事件。

我能想到的最可靠的方法是收听timeupdate和ended事件。如果正在播放视频，您将获得至少3次timeupdate事件。如果出现错误，ended将比error更可靠地触发。

Answer 4

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

Answer 5

很高兴知道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，可用于显示错误播放消息。

Answer 6

哈巴狗示例

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

HTML5视频错误处理

6 个答案:

HTML

JS

JQuery的

AngularJS