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

Свойства networkState JS медиа объекта video и audio характеризуют различные статусы сетевого состояния для аудио или видео элемента на web странице и позволяют узнать и определить медиа файл источник, его предварительную загрузку и буферизацию.

 

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

Содержание:

           свойство DOMString src;
  readonly свойство DOMString currentSrc;
           свойство DOMString crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly свойство unsigned short networkState;
           свойство DOMString preload;
  readonly свойство TimeRanges buffered;

 

 

.src

//string, чтение и изменение
media.src [ = "URL String" ]

Свойство media.src  JS объекта медиа элемента audio и video возвращает или устанавливает строку, определяющую URL путь к медиа файлу. Свойство media.src JS медиа объекта отражает значение одноименного атрибута src  HTML тега audio и video. Это значит, что значение атрибута src тега audio и video может динамически изменяться и задаваться через свойство media.src JS медиа объекта. Значение по умолчанию для свойства media.src JS медиа объекта, при его инициализации, будет соответствовать первичному значению атрибута src тега audio или video, или пустой строке, если HTML атрибут src не задан для этих тегов. Любые изменения значения свойства media.src JS объекта медиа элемента audio и video будут приводить и к изменению значения одноименного атрибута src HTML тегов audio и video. Также, установка или изменение значения свойства media.src JS объекта медиа элемента audio и video будет вызывать перезагрузку медиа элемента на web странице (алгоритм загрузки медиа элемента ), точно также, как это происходит при вызове метода media.load()  для JS объекта медиа элемента. Исходя из этого, не требуется использовать метод media.load() при смене URL пути к медиа файлу через свойство media.src JS объекта медиа элемента audio и video т.к. перезагрузка ресурса будет выполнена и так. Также, в ходе перезагрузки медиа элемента на web странице будет исполнен алгоритм выбора ресурса , в ходе которого будет переопределено значение свойства media.currentSrc, которое будет обновлено на новый абсолютный URL, заданный для свойства media.src JS объекта медиа элемента audio и video. При задании свойства media.src JS медиа элемента audio и video, URL путь к файлу источнику видео или аудио можно указать как абсолютный (полный URL вида: http://www.example.com/...), так и как относительный к текущему домену web страницы. При получении же значения свойства media.src JS медиа объекта, всегда будет возвращаться полный абсолютный URL, как путь к медиа файлу, включая протокол (http:|https:) и домен. Свойство media.src JS медиа объекта поддерживается всеми браузерами.

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

//установим новый видео файл
myVideo.src = "/content/uploads/userfiles/files/2015/08/196/html5-audio-video-examples.mp4";
myVideo.play();

С практической стороны, свойство media.src удобно использовать для динамической смены воспроизводимого медиа файла. Например, если у вас имеется плей лист из нескольких аудио или видео треков, то можно организовать переключение медиа плеера на выбранный пользователем медиа файл из этого плей листа. Это можно сделать, если закрепить за событием click для элементов плей листа JS функцию, выполняющую изменение значения свойства media.src JS объекта медиа элемента audio и video. Перед сменой значения свойства media.src вы должны быть уверены, что новый медиа файл сможет воспроизвестись медиа плеером. В этом можно убедиться использовав метод canPlayType()  JS медиа объекта.

 

 

.currentSrc

//string, только чтение
media.currentSrc

Свойство media.currentSrc  медиа элемента audio и video доступно только для чтения и возвращает строку, содержащую текущий абсолютный URL пути к медиа файлу для JS медиа объекта, включая протокол (http:|https:) и домен. Если медиа файл не задан для медиа элемента audio и video, то свойство возвращает пустую строку. Значение свойства media.currentSrc устанавливается в процессе работы алгоритма выбора ресурса для медиа-элемента, который запускается как часть алгоритма загрузки медиа элемента, что может происходить при смене значения свойства media.src или при вызове метода media.load()  для JS объекта медиа элемента. Значение свойства media.currentSrc определяется из атрибута src HTML тегов <audio> и <video>, или из дочерних для них тегов <source>, находящихся внутри данного контейнера аудио или видео. Нужно обратить внимание, что свойство media.currentSrc будет устанавливаться сначала из значения атрибута src HTML тега audio или video, иначе, если же этот атрибут отсутствует у этих тегов, то тогда значение будет устанавливаться из атрибута src HTML тегов <source>, вложенных в HTML тег audio и video. Иными словами, атрибут src HTML тега audio и video имеет приоритет перед атрибутами src вложенных HTML тегов source. Свойство media.currentSrc JS медиа объекта поддерживается всеми браузерами.

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

//показать значение свойства currentSrc
alert(myVideo.currentSrc);

На практике, получить значение свойства media.currentSrc JS медиа объекта может быть полезным, что бы узнать URL к текущему медиа файлу в плеере, что может потребоваться для различных проверок, например, при манипуляции с плей листом для HTML5 проигрывателя аудио и видео.

 

 

.crossOrigin

//string, чтение и изменение, default = NULL
media.crossOrigin [ = "anonymous|use-credentials" ]

Свойство media.crossOrigin  JS объекта медиа элемента audio и video возвращает или устанавливает строковое значение, которое указывает браузеру на необходимость выполнения CORS (Cross-origin resource sharing )  запроса для данного элемента. Свойство media.crossOrigin JS медиа объекта отражает, задает и управляет, посредством JS, значением одноименного атрибута crossorigin  HTML тега <audio> и <video>. По умолчанию атрибут crossorigin у HTML тегов аудио и видео отсутствует и, соответственно, свойство media.crossOrigin возвращает значение NULL. Для свойства media.crossOrigin, также как и для его одноименного HTML атрибута crossorigin, возможны следующие значения: "anonymous" и "use-credentials". Установка свойства в одно из этих значений дает команду браузеру выполнять CORS запрос для данного медиа элемента.

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

//показать значение свойства crossOrigin
alert(myVideo.crossOrigin);
//установить возможные значения: как anonymous
myVideo.crossOrigin = "use-credentials";
//или как use-credentials
myVideo.crossOrigin = "use-credentials";

 

 

.networkState

//unsigned short, только чтение
media.networkState

Свойство networkState  медиа элемента audio и video доступно только для чтения и возвращает целое, положительное число, которое означает текущий статус сетевой активности для медиа элемента. В процессе различных манипуляций, которые выполняются с медиа элементом видео и аудио на странице, может происходить активное его взаимодействие с сетью, например, при загрузке медиа файла, получения метаданных и т.п. Эти изменения, также, связаны с наступлением тех или иных событий  для меда элемента. Так, в процессе работы алгоритма загрузки медиа элемента запускается, как его часть, алгоритм выбора ресурса, в ходе которого выполняется активное взаимодействие с сетью и происходит смена и установка различных networkState статусов, значения которых позволяет понять, в каком именно состоянии находиться взаимодействия медиа элемента и сети. Чтобы избежать возникновения ошибок, может быть полезно узнать networkState значение медиа элемента предварительно, например, перед вызовом методов воспроизведения audio или video файла. Статусам  networkState медиа элемента соответствуют константы, название которых кратко характеризует определяемый ими статус. Свойство networkState поддерживается всеми браузерами.

Значения свойства networkState и соответствующие им константы:

  • 0 = NETWORK_EMPTY - медиа элемент не инициализирован еще, это начальное состояние, также, если src не указан вообще для медиа элемента, то выполняется установка свойства networkState в значение NETWORK_EMPTY и выполнение resource selection алгоритма заканчивается;
  • 1 = NETWORK_IDLE - запущен алгоритм выбора ресурса для медиа элемента в ходе которого выбран ресурс (медиа файл), но загрузка файла еще не начата. Это значит, что медиа файл выбран и медиа элемент ожидает наступления события, запускающего загрузку файла, которое может наступить автоматически, если установлен атрибут preload или autoplay тегов video или audio, или быть вызвано пользователем по нажатию кнопки воспроизведения/прокрутки файла в медиа плеере;
  • 2 = NETWORK_LOADING - браузер выполняет загрузку медиа файла и по окончании загрузки браузером медиа файла будет выполнена установка значения свойства networkState медиа элемента в NETWORK_LOADING, что говорит о том, что медиа файл может быть доступен и воспроизведен в плеере. Однако, если браузер закэшировал медиа файл ранее, то загрузка может и не выполняться и, соответственно, этот статус не будет задан, а вместо него будет NETWORK_IDLE, но файл, все равно сможет быть воспроизведен в этой ситуации;
  • 3 = NETWORK_NO_SOURCE - запущен алгоритм выбора ресурса для медиа элемента, но медиа файл еще не найден. Если загрузка файла не удалась, то будут заданы: error как MEDIA_ERR_SRC_NOT_SUPPORTED, networkState как NETWORK_NO_SOURCE и закончиться работа алгоритма выбора ресурса.

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

//показать значение свойства networkState
alert(myVideo.networkState);

 

 

.preload

//string, чтение и изменение, default = "none|empty string"
media.preload [ = "auto|metadata|none" ]

Свойство media.preload  JS объекта медиа элемента audio и video возвращает или устанавливает строковое значение, которое определяет, как должен браузер загружать медиа файл при загрузке web страницы. Свойство media.preload JS медиа объекта отражает, задает и управляет значением одноименного атрибута preload  HTML тега <audio> и <video>. Соответственно, значение свойства media.preload  устанавливается по умолчанию при инициализации медиа объекта из значения одноименного HTML атрибута preload, если он присутствует в тегах <audio> и <video>, в противном случае значение задается как "none" или как пустая строка, что будет равносильно значению "auto". Значение свойства media.preload и его одноименного HTML атрибута preload носят для браузера рекомендательный характер. Это означает, что браузер может игнорировать значение этого атрибута и свойства, например, на основе пользовательского выбора или на основе состояния сети. Также, свойство media.preload может быть переопределено (отменено) свойством media.autoplay  JS медиа элемента, если последнее установлено в true, что заставить браузер загрузить медиа файл для воспроизведения. Так же, нужно понимать, что свойство media.preload не влияет непосредственно на саму скорость загрузки медиа файла.

Значения свойства preload:

  • "none" - рекомендация браузеру не выполнять загрузку медиа файла вместе с загрузкой web страницы, пока пользователь явно не потребовал этого, например нажав play в медиа плеере. Это значение удобно использовать (и динамически задавать), что бы ограничить нагрузку на web сервер и сеть, например, когда на WEB странице представлено несколько аудио или видео файлов;
  • "metadata" - рекомендация браузеру не выполнять полную загрузку файла вместе с загрузкой web страницы, а выполнять только загрузку метаданных (размеры, список дорожек, продолжительность, и, возможно, даже первые несколько кадров) мультимедийного файла. При этом значение media.readyState JS свойства медиа элемента будет установлено как HAVE_METADATA или, если получены первые кадры, что как правило и бывает, как HAVE_CURRENT_DATA или HAVE_FUTURE_DATA;
  • "auto" - рекомендация браузеру, что он может сам решать как и когда следует загружать медиа файл. В этом случае браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Значение свойства может быть, также, представлено пустой строкой "empty string", что будет эквивалентно значению "auto" для браузера.

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

//показать значение свойства preload
alert(myVideo.preload);

//установить возможные значения
//как "none"
myVideo.preload = "none";
//или как "metadata"
myVideo.preload = "metadata";
//или как "auto"
myVideo.preload = "auto";

Практическое удобство свойства media.preload JS объекта медиа элемента audio и video и его одноименного HTML атрибута preload состоит в том, что они дают возможность управлять (при инициализации и динамически) загрузкой медиа файлов в плеере(плеерах), что может быть удобно для целей снижения нагрузки на web сервер и сетевое соединение с ним. Например, когда у вас на web странице представлено несколько медиа объектов, то одновременная, предварительная загрузка всех файлов может быть нежелательна и ее можно предупредить через  значения свойства preload = "none" или минимизировать через значение preload = "metadata".

 

 

.buffered

//TimeRanges object, только чтение
media.buffered

Свойство media.buffered   JS медиа элемента audio и video доступно только для чтения и возвращает TimeRanges  JS объект, который представляет и содержит временные диапазоны (buffered time-range) медиа файла, которые уже были загружены браузером и помещены в буфер (кеш) браузера. Соответственно, части медиа файла, находящиеся в пределах этих диапазонов доступны для воспроизведения и не требуют для этого предварительной загрузки, так как она уже была выполнена для них браузером. Иными словами, пользователь, в пределах этих диапазонов, может свободно перемещать курсор воспроизведения и устанавливать его любое место, в пределах диапазонов, и воспроизводить медиа файл с выбранной позиции. Время начала и окончания для временных диапазонов задается как число секунд от начала audio или video файла. Свойство media.buffered поддерживается всеми браузерами.

Свойства и методы TimeRanges объекта применительно к свойству media.buffered:

//readonly, unsigned long
media.buffered.length;
  • length свойство TimeRanges объекта, полученное из свойства media.buffered, вернет количество временных диапазонов (частей) audio или video файла, которые загружены браузером и помещены в его буфер (кеш);
//double in seconds от начала файла
startTime = media.buffered.start(index);
//double in seconds от начала файла
endTime = media.buffered.end(index);
  • методы .start() и .end() JS объекта TimeRanges вернут стартовую и конечную позицию в секундах для временного диапазона соответствующего индекса, как время от начала медиа файла на временной шкале плеера, или IndexSizeError в случае отсутствия такого индекса в TimeRanges объекте;

Замечание: Значения Index начинается с 0. Если указанный индекс будет отсутствовать в TimeRanges объекте, то возникнет ошибка IndexSizeError.

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

//количество кэшированных временных диапазонов
myVideo.buffered.length;

//Время старта первого временного диапазона
//от начала медиа файла в секундах
myVideo.buffered.start(0);

//Время окончания первого временного диапазона
//от начала медиа файла в секундах
myVideo.buffered.end(0);

//Показать некоторую информацию о TimeRanges объекте
if(myVideo.buffered.length > 0) {
  alert("Length: "
      + myVideo.buffered.length +
      " | Start for 0 index: " +
      myVideo.buffered.start(0)
      + " | End for 0 index: " +
      myVideo.buffered.end(0)
    );
} else {
  alert("No buffered part of video")
};

Получить значения уже загруженных и кэшированных браузером временных диапазонов - частей аудио или видео файла может быть полезным, например, что бы выполнить проверку доступности воспроизведения или поиска для выбранного пользователем участка медиа файла.

 

Пример video:

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

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