Материалы для WEB разработки на LAMP
JS свойства состояния ошибки video и audio

Свойства error JS медиа объекта video и audio характеризуют различные статусы ошибок, возникающие в процессе манипуляции с аудио или видео элементом на WEB странице.

 

Свойства состояния ошибки для медиа объекта:

//Свойство ошибки медиа объекта video и audio
readonly свойство MediaError error;

// Свойства JS объекта MediaError
interface MediaError {
  const unsigned short MEDIA_ERR_ABORTED = 1;
  const unsigned short MEDIA_ERR_NETWORK = 2;
  const unsigned short MEDIA_ERR_DECODE = 3;
  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
  readonly свойство unsigned short code;
};

 

 

.error

//MediaError object, только чтение
media.error

Свойство media.error  JS объекта медиа элемента audio и video доступно только для чтения и возвращает MediaError  JS объект, содержащий статус последней возникшей ошибки для данного медиа элемента в процессе исполнения алгоритма выбора ресурса. Если для медиа элемента не было ошибок, то свойство media.error вернет NULL значение. Свойство media.error медиа JS объекта поддерживается не всеми браузерами.

 

JS объект MediaError имеет только одно свойство, доступное только для чтения - MediaError.code:

.error.code

//unsigned short, только чтение
MediaError.code;

//пример получения кода последней ошибки для
//медиа элемента или NULL, если ошибок нет
myVideo.error.code;

Это свойство code  возвращает из JS объекта MediaError, в формате целого положительного числа, числовой код последней ошибки для медиа элемента. Кодам ошибок соответствую именные константы, названия которых кратко описывают тип ошибки, который возник для медиа элемента.

Коды ошибок и соответствующие им константы:

  • 1 = MEDIA_ERR_ABORTED - получение и загрузка медиа файла били прерваны пользователем, например, по нажатию СТОП кнопки в медиа плеере, что связано с событием abort  для медиа элемента. Свойство media.networkState будет в этих случаях как NETWORK_EMPTY или как  NETWORK_IDLE;
  • 2 = MEDIA_ERR_NETWORK - ошибка при загрузке медиа файла, например, при обрыве сетевого соединения. Свойство  media.networkState будет в этих случаях как NETWORK_EMPTY или как  NETWORK_IDLE;
  • 3 = MEDIA_ERR_DECODE - ошибка при декодировании медиа файла. В этом случае, если свойство media.readyState равно HAVE_NOTHING, то оно будет установлено networkState как NETWORK_EMPTY, и show poster flag будет установлено как true, и будет вызвано событие emptied  для медиа элемента, иначе media.networkState будет установлено в NETWORK_IDLE;
  • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - данное audio/video не поддерживается, свойство media.networkState будет установлено как NETWORK_NO_SOURCE и show poster flag как true.

 

Пример использования свойства media.error

Для демонстрации примера на этой странице добавлена JS функция:

<script>
//Функция, показывающая причину ошибки для медиа элемента

 function mediaError(e) {
 
   switch (e.target.error.code) {
   
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('Воспроизведение прервано пользователем.');
       break;
       
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('Ошибка сети, загрузка медиа файла остановлена.');
       break;
       
     case e.target.error.MEDIA_ERR_DECODE:
       alert('Воспроизведение медиа файла прервано по причине наличия 
в нем элементов, которые не могут быть декодированы браузером.');
       break;
       
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('Медиа файл не может быть загружен по причине ошибки сервера 
или сети, или данный формат медиа не поддерживается.');
       break;
       
     default:
       alert('Не известная ошибка.');
       break;
   }
 }
</script>


К примеру видео на странице добавлен вызов это функции при ошибке:

<video ... onerror="mediaError(event)"></video>

Имитируем ошибку не правильного URL к медиа файлу, для этого сменим src на пустое значение:

myVideo.src = "";

Код кнопки вызова ошибки:

<input onclick="myVideo.src = '';" type="button" value="Set empty URL" />

 

Пример video:

Для работы с примером видео на этой странице использовано присвоение объекта видео в переменную JS с именем "myVideo".

Также смотри примеры на странице: "Демонстрация JS управления HTML5 video и audio.