HTML5 视频错误处理

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”不是 的有效事件类型，

请改用“error”。

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

有关 事件的完整列表，请访问此处：https:// developer.mozilla.org/En/Using_audio_and_video_in_Firefox

Answer 2

从 Firefox 4 开始，“error”事件调度于 元素。

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

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

很高兴知道 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 4

要捕获错误事件，您应该使用 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 和 ending 事件。如果视频正在播放，您将至少收到 3 个 timeupdate 事件。如果发生错误，end 会比 error 更可靠地被触发。

Answer 5

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

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