Три других свойства позволяют получить более точное представление о временной шкале для проигрываемых данных и состоянии механизма буферизации. Свойство
<b>played</b>
возвращает диапазон или диапазоны времени, проигрываемые в настоящее время. Свойство
<b>buffered</b>
возвращает диапазон или диапазоны времени, которые в настоящее время находятся в буфере, а свойство
<b>seekable</b>
возвращает диапазон или диапазоны времени, куда проигрыватель может выполнить переход. (Эти свойства можно использовать для реализации индикатора, иллюстрирующего свойства
<b>currentTime</b>
и
<b>duration</b>
, а также продолжительность воспроизведенных данных и объем данных в буфере.)
Свойства
<b>played, buffered</b>
и
<b>seekable</b>
являются объектами
<b>TimeRanges</b>
. Каждый объект имеет свойство
<b>length</b>
, определяющее количество представляемых им диапазонов, и методы
<b>start()</b>
и
<b>end(),</b>
возвращающие начало и конец (в секундах) диапазона с указанным номером. В наиболее типичном случае, когда имеется всего один непрерывный диапазон, эти методы вызываются, как
<b>start(0)</b>
и
<b>end(0).</b>
Если, к примеру, предположить, что переходы не выполнялись и данные буферизованы с самого начала, то можно использовать следующий прием, чтобы определить, какая доля ресурса в процентах была загружена в буфер:
<b>var percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100);</b>
Наконец, имеются еще три свойства,
<b>readyState, networkState</b>
и
<b>error</b>
, позволяющие получить низкоуровневую информацию о состоянии элементов
<b><audio></b>
и
<b><video>.</b>
Все эти свойства имеют числовые значения, и для каждого допустимого значения определена константа. Обратите внимание, что эти константы определены непосредственно в мультимедийном объекте (или в объекте ошибки). Эти константы можно использовать, как показано ниже:
<b>if (song.readyState === song.HAVE_ENOUGH_DATA) song.play();</b>
Свойство
<b>readyState</b>
определяет, как много мультимедийных данных было загружено, и, соответственно, готов ли элемент начать воспроизведение этих данных. Допустимые значения этих свойств и их смысл перечислены ниже:
Свойство
<b>networkState</b>
определяет, использует ли (и если нет, то почему) сеть мультимедийный элемент:
Когда при загрузке или воспроизведении возникает ошибка, броузер записывает определенное значение в свойство
<b>error</b>
элемента
<b><audio></b>
или
<b><video>.</b>
При отсутствии ошибок свойство error имеет значение null. Иначе оно ссылается на объект с числовым свойством code, описывающим ошибку. Объект ошибки также определяет константы для возможных кодов ошибок:
Свойство
<b>error</b>
можно использовать, как показано ниже:
<b>if (song.error.code == song.error.MEDIA_ERR_DECODE)</b>
<b> alert("Невозможно воспроизвести песню: повреждены аудиоданные.");</b>
21.2.4 События мультимедийных элементов
Элементы
<b><audio></b>
и
<b><video></b>
являются довольно сложными элементами - они должны откликаться на взаимодействие пользователя с их элементами управления, выполнять сетевые операции и даже, в процессе воспроизведения, реагировать на простое течение времени. Мы только что видели, что эти элементы имеют довольно много свойств, определяющих их состояние. Подобно большинству HTML-элементов, элементы
<b><audio></b>
и
<b><video></b>
генерируют события при изменении своего состояния. Поскольку состояние этих элементов описывается множеством характеристик, они могут генерировать довольно много различных событий.
В таблице ниже перечислены 22 события мультимедийных элементов, примерно в том порядке, в каком они обычно возникают. Элементы не имеют свойств обработчиков этих событий, поэтому для регистрации функций обработчиков в элементах
<b><audio></b>
и
<b><video></b>
следует использовать метод
<b>addEventListener()</b>
.
21.3. SVG - масштабируемая векторная графика
Масштабируемая векторная графика (SVG) - это грамматика языка XML для описания графических изображений. Слово «векторная» в названии указывает на фундаментальное отличие от таких форматов растровой графики, как GIF, JPEG и PNG, где изображение задается матрицей пикселов. Формат SVG представляет собой точное, не зависящее от разрешения (отсюда слово «масштабируемая») описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок. Вот пример простого SVG-изображения в текстовом формате:
<b><!-- Начало рисунка и объявление пространства имен --></b>
<b><svg xmlns="</b><a href="http://www.w3.org/2000/svg"><b>http://www.w3.org/2000/svg</b></a><b>"</b>
<b> viewBox="0 0 1000 1000"> <!-- Система координат рисунка --></b>