JavaScript. Подробное руководство, 6-е издание, стр. 350

Три других свойства позволяют получить более точное представление о временной шкале для проигрываемых данных и состоянии механизма буферизации. Свойство

<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>&lt;audio&gt;</b>
и
<b>&lt;video&gt;.</b>
Все эти свойства имеют числовые значения, и для каждого допустимого значения определена константа. Обратите внимание, что эти константы определены непосредственно в мультимедийном объекте (или в объекте ошибки). Эти константы можно использовать, как показано ниже:

<b>if (song.readyState === song.HAVE_ENOUGH_DATA) song.play();</b>

Свойство

<b>readyState</b>
определяет, как много мультимедийных данных было загружено, и, соответственно, готов ли элемент начать воспроизведение этих данных. Допустимые значения этих свойств и их смысл перечислены ниже:

JavaScript. Подробное руководство, 6-е издание - i_045.jpg

Свойство

<b>networkState</b>
определяет, использует ли (и если нет, то почему) сеть мультимедийный элемент:

JavaScript. Подробное руководство, 6-е издание - i_046.jpg

JavaScript. Подробное руководство, 6-е издание - i_047.jpg

Когда при загрузке или воспроизведении возникает ошибка, броузер записывает определенное значение в свойство

<b>error</b>
элемента
<b>&lt;audio&gt;</b>
или
<b>&lt;video&gt;.</b>
При отсутствии ошибок свойство error имеет значение null. Иначе оно ссылается на объект с числовым свойством code, описывающим ошибку. Объект ошибки также определяет константы для возможных кодов ошибок:

JavaScript. Подробное руководство, 6-е издание - i_048.jpg

Свойство

<b>error</b>
можно использовать, как показано ниже:

<b>if (song.error.code == song.error.MEDIA_ERR_DECODE)</b>

<b>  alert(&quot;Невозможно воспроизвести песню: повреждены аудиоданные.&quot;);</b>

21.2.4 События мультимедийных элементов

Элементы

<b>&lt;audio&gt;</b>
и
<b>&lt;video&gt;</b>
являются довольно сложными элементами - они должны откликаться на взаимодействие пользователя с их элементами управления, выполнять сетевые операции и даже, в процессе воспроизведения, реагировать на простое течение времени. Мы только что видели, что эти элементы имеют довольно много свойств, определяющих их состояние. Подобно большинству HTML-элементов, элементы
<b>&lt;audio&gt;</b>
и
<b>&lt;video&gt;</b>
генерируют события при изменении своего состояния. Поскольку состояние этих элементов описывается множеством характеристик, они могут генерировать довольно много различных событий.

В таблице ниже перечислены 22 события мультимедийных элементов, примерно в том порядке, в каком они обычно возникают. Элементы не имеют свойств обработчиков этих событий, поэтому для регистрации функций обработчиков в элементах

<b>&lt;audio&gt;</b>
и
<b>&lt;video&gt;</b>
следует использовать метод
<b>addEventListener()</b>
.

JavaScript. Подробное руководство, 6-е издание - i_049.jpg

JavaScript. Подробное руководство, 6-е издание - i_050.jpg

JavaScript. Подробное руководство, 6-е издание - i_051.jpg

21.3. SVG - масштабируемая векторная графика

Масштабируемая векторная графика (SVG) - это грамматика языка XML для описания графических изображений. Слово «векторная» в названии указывает на фундаментальное отличие от таких форматов растровой графики, как GIF, JPEG и PNG, где изображение задается матрицей пикселов. Формат SVG представляет собой точное, не зависящее от разрешения (отсюда слово «масштабируемая») описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок. Вот пример простого SVG-изображения в текстовом формате:

<b>&lt;!-- Начало рисунка и объявление пространства имен --&gt;</b>

<b>&lt;svg xmlns=&quot;</b><a href="http://www.w3.org/2000/svg"><b>http://www.w3.org/2000/svg</b></a><b>&quot;</b>

<b>  viewBox=&quot;0 0 1000 1000&quot;&gt; &lt;!-- Система координат рисунка --&gt;</b>