Материалы для WEB разработки на LAMP
JS метод .load() HTML элементов Audio и Video

В статье описано использование метода media.load() Java Script, который выполняет перезагрузку медийного HTML элемента audio или video на WEB странице. Приведены примеры использования метода и листинги JS кода.

 

.load()

myVideo.load();

Метод load() , примененный к медийному элементу audio или video на WEB странице, вызывает перезагрузку (обновление) этого элемента на странице. Метод используют, когда над медиа элементом выполнялись JS манипуляции по его HTML изменению, т.е. изменился HTML код элемента и вложенных в него элементов. Например, смена источника (URL) подключаемого медиа файла, что самое частое, или изменение и добавление других атрибутов медиа элемента или тегов внутри контейнера видео/аудио. Для того, что бы выполненные изменения аудио или видео элемента применились для него, выполняют метод media.load(). Метод не имеет входных параметров и возвращаемого значения, а просто выполняет обновление HTML медиа элемента на web странице. Вызов метода media.load() запускает алгоритм загрузки медиа элемента  в ходе которого выполняются:

  • для текущего медиа элемента прекращается загрузка и воспроизведение, если они выполнялись;
  • удаляются все задачи, имеющиеся в очереди, для текущего медиа элемента;
  • к меда элементу video или audio применяются, сделанные после его последней загрузки, изменения;
  • некоторые свойства JS объекта медиа элемента сбрасываются в начальные значения:
    • свойство readyState в HAVE_NOTHING;
    • свойство paused в true;
    • свойство seeking в false;
    • current playback position в значение 0;
    • official playback position в значение 0;
    • initial playback position в значение 0;
    • свойство playbackRate устанавливается в значение равное свойству defaultPlaybackRate;
    • свойство error в значение null и autoplaying flag в true;
  • поле выполнения всех описанных выше преобразований запускается алгоритм выбора ресурса , который выполняет обновление медиа файла источника для медиа элемента аудио или видео:
    • resource selection algorithm всегда вызывается синхронно, но после первых, необходимых шагов, работа алгоритма продолжиться в асинхронном режиме, кроме того, этот алгоритм тесно взаимодействует с механизмом цикла обработки событий и может запускать другие алгоритмы при наступлении триггерных событий или сам быть вызванным по наступлении некоторых событий;
    • установка свойства networkState медиа элемента в значение NETWORK_NO_SOURCE;
    • установка show poster flag в значение true, что заставляет браузер показать картинку poster в области воспроизведения медиа плеера;
    • выбор режима получения источника медиа файла - вначале через атрибут src тега <audio> или <video>, если он задан, иначе через атрибут src дочерних тегов <source>:
      • если src не указан вообще, то выполняется установка свойства networkState в значение NETWORK_EMPTY и выполнение resource selection алгоритма заканчивается;
    • установка networkState в значение NETWORK_LOADING, если предыдущий шаг был успешный;
    • запуск события loadstart  для медиа элемента;
    • загрузка медиа ресурса(файла) по пути указанному в src атрибуте:
      • если URL корректный то выполняется установка значения свойства currentSrc как строки с absolute URL к медиа файлу;
      • запуск resource fetch алгоритма для установленного absolute URL, который выполняет:
        • удаление всех имеющихся текстовых треков для медиа элемента;
        • запуск загрузки файла - автоматически, если установлен атрибут preload или autoplay тегов video или audio, или пользователем по нажатию кнопки воспроизведения/прокрутки файла;
        • установка свойства networkState в значение NETWORK_IDLE;
        • запуск события suspend  (ожидания загрузки файла в DOM) для медиа элемента и ожидания загрузки браузером источника;
      • по окончании загрузки браузером медиа файла будет выполнена установка значения свойства networkState медиа элемента в NETWORK_LOADING;
      • если загрузка файла не удалась то установить error как MEDIA_ERR_SRC_NOT_SUPPORTED, установить свойство networkState как NETWORK_NO_SOURCE, установить show poster flag в true, для показа постера, вызвать событие error  для медиа элемента и закончить алгоритм выбора ресурса;
  • меда элемент заново перезагружается и перерисовывается на web странице, все его JS свойства устанавливаются в начальные значения;
  • в случае возникновения ошибок, выводятся соответствующие сообщения и устанавливаются статусы.

Пример использования .load() метода:

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

var myVideo = document.getElementById("video-example-1");

Пример демонстрирует динамическое изменение медиа элемента video и перезагрузку его для применения сделанных изменений. Для видео примера выполняется смена рисунка постера и смена проигрываемого видео файла. Затем, для вступления изменений в силу, применяется метод load().

 

//получим медиа объект в переменную
var myVideo = document.getElementById("video-example-1");

//myVideo.pause(); //не обязательно

//установим новый постер для видео
myVideo.poster =  "/img/examples/example2-500x375.jpg";
//установим новый видео файл
myVideo.src = "/content/uploads/userfiles/files/2015/08/196/html5-audio-video-examples.mp4";

//выполним перезагрузку медиа элемента на странице
//не обязательно, т.к. смена src вызывает и перезагрузку
myVideo.load();

//можно запустить видео на воспроизведение
myVideo.play();// если необходимо

Для демонстрации примера запустите воспроизведение текущего видео, затем, приведенный здесь код, скопируйте и выполните в консоли браузера, что бы увидеть работу метода load(). Также смотри примеры на странице: "Демонстрация JS управления HTML5 video и audio.