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» не является допустимым типом события для <video>

Вместо этого используйте «error».

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, событие 'error' - это , отправленное элементу <source> .

И вы должны добавить обработчик ошибок на единственный / последний источник :

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 (при захвате) должно быть установлено значение true.Событие ошибки обычно вызывается потомками видеоэлемента (тегов).

В любом случае, использование тега video для запуска события error - не лучшая стратегия для определения, воспроизводилось ли видео.Это событие не запускается на некоторых устройствах Android и iOS.

Самый надежный метод, который я могу себе представить, - это прослушивание событий timeupdate и ended.Если воспроизводилось видео, вы получите как минимум 3 события с обновлением времени.В случае ошибки ended будет срабатывать более надежно, чем error.

Answer 4

Хорошо знать, что 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 5

Вместо этого попробуйте добавить прослушиватель событий в тег - я думаю, что атрибут onerror (событие «error») теперь работает с тегом источника, а не с тегом video.

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