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

Флэнаган Дэвид
Шрифт:

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

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

Свойство

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

if (song.error.code == song.error.MEDIA_ERR_DECODE)

alert("Невозможно воспроизвести песню: повреждены аудиоданные.");

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

Элементы

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

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

<audio>
и
<video>
следует использовать метод
addEventListener
.

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

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

<!-- Начало рисунка и объявление пространства имен -->

<svg xmlns=" http://www.w3.org/2000/svg "

viewBox="0 0 1000 1000"> <!-- Система координат рисунка -->

<defs> <!-- Настройка некоторых определений -->

<linearGradient id="fade"> <!-- Цветовой градиент с именем ''fade” -->

<stop offset="0%" stop-color="#008"/> <!-- Начинаем с темно-синего -->

<stop offset="100%" stop-color="#ccf"/><!--Заканчиваем светло-синим-->

</linearGradient>

</defs>

<!
– -

Нарисовать прямоугольник с тонкой черной рамкой и заполнить его градиентом

– ->

<rect х="100” у="200" width="800" height="600" stroke="black"

stroke-width="25" fill="url(#fade)"/>

</svg>

На рис. 21.1 показано графическое представление этого SVG-файла.

SVG - это довольно обширная грамматика умеренной сложности. Помимо простых примитивов рисования она позволяет воспроизводить произвольные кривые, текст и анимацию. Рисунки в формате SVG могут даже содержать JavaScript-сценарии и таблицы CSS-стилей, что позволяет наделить их информацией о поведении и представлении. В этом разделе показано, как с помощью клиентского JavaScript-кода (встроенного в HTML-, а не в SVG-документ) можно динамически создавать графические изображения средствами SVG. Приводимые здесь примеры SVG-изображений позволяют лишь отчасти оценить возможности формата SVG. Полное описание этого формата доступно в виде обширной, но вполне понятной спецификации, которая поддерживается консорциумом W3C и находится по адресуОбратите внимание: эта спецификация включает в себя полное описание объектной модели документа (DOM) для SVG-документов. В данном разделе рассматриваются приемы манипулирования SVG-графикой с помощью стандартной модели XML DOM, а модель SVG DOM не затрагивается.

К моменту написания этих строк все текущие веб-броузеры, кроме IE, имели встроенную поддержку формата SVG (она также будет включена в IE9). В последних версиях броузеров отображать SVG-изображения можно с помощью обычного элемента

<img>
. Некоторые немного устаревшие броузеры (такие как Firefox 3.6) не поддерживают такую возможность и требуют использовать для этих целей элемент
<object>
:

<object data="sample.svg" type="image/svg+xml" width=''100" height="100"/>