HTML5视频错误处理

Question

我需要告诉你,视频是否无法播放(浏览器中显示"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
            }
        }

这有什么不对？

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开始,将在<source>元素上调度 '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事件ended。如果正在播放视频，您将至少收到 3 个时间更新事件。在发生错误的情况下，ended将比 更可靠地触发error。