Вверх A A A
Ноябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
44
1
2
3
4
45
5
6
7
8
9
10
11
46
12
13
14
15
16
17
18
47
19
20
21
22
23
24
25
48
26
27
28
29
30
49
Мультимедиа и скрипты

Мультимедиа и скрипты

Краткий курс HTML 5

Стандарт HTML позволяет вставлять в документ различные объекты, включая аудио/видео-проигрыватели, flash-ролики, скрипты, PDF-документы и прочее.

Элемент <object> предназначен для подключения какого-либо внешнего ресурса и может отображаться, в зависимости от его типа, как изображение, встроенный документ или управляемая плагином область. Адрес ресурса, будь-то изображение, видео-ролик или что-либо другое, указывается в атрибуте data, а его MIME-тип — в type. Если необходимо вставить плагин без указания ресурса, то указывается только type, но в любом случае один из этих атрибутов должен обязательно присутствовать в элементе. Если ресурс указанного типа не может быть отображен в браузере, то вместо объекта выводится содержимое элемента <object>. Таким образом, в нем целесообразно помещать информацию о необходимости установки плагина и т. п.

Ширина и высота отображаемого объекта устанавливается в атрибутах width и height соответственно. Если подключаемый ресурс является изображением, то с <object> можно использовать атрибут usemap, аналогичный атрибуту элемента <img /> и описанный в главе «Изображения». Поскольку элемент <object> может быть частью формы, он поддерживает также атрибуты form и name, описанные в главе «Элементы ввода данных».

<object data="flash.swf" width="320" height="230">
   <param name="autoplay" value="false" />
   <param name="volume" value="80%" />
   Необходимо установить плагин Macromedia Flash.
</object>

Подключение некоторых типов ресурсов требует указания дополнительных параметров. Это можно сделать с помощью элементов <param />, размещаемых один за другим внутри <object>. Этот элемент поддерживает только атрибуты name и value, в которых указываются соответственно имя и значение передаваемого параметра.

В HTML5 наконец-то узаконен элемент <emded />, по функциональности аналогичный <object>, но все же с некоторыми отличиями. Роль атрибута data в нем выполняет src, а атрибуты type, width и height полностью идентичны. Элемент <embed /> — пустой, поэтому в нем нельзя указать содержимое на случай, скажем, отсутствия плагина, а дополнительные параметры передаются не в <param />, а непосредственно в атрибутах самого <embed />. Получается, что <embed> поддерживает произвольный набор атрибутов, удовлетворящих принятым правилам их составления. Исключением являются лишь зарезервированные названия атрибутов: name, align, hspace и vspace, которые нельзя указывать в <embed />

<embed src="helloworld.swf" anyparam="value" />

Если в <embed /> не указан ни src, ни type, или если он находится внутри элемента <object>, то он полностью игнорируется. Так задумано в целях совместимости со старыми браузерами, одни из которых поддерживают только <object>, а другие — только <embed />, что вынуждало веб-мастеров размещать один элемент внутри другого.

Для добавления в документ аудио и видео HTML5 предлагает специальные теги <audio> и <video>. Адрес подключаемого файла указывается в атрибуте src. Если браузер не поддерживает элемент, то он, как и в случае с <object>, просто отобразит его содержимое. Оба этих элемента поддерживают булевы атрибуты preload="preload", autoplay="autoplay", controls="controls" и loop="loop". Первый из них сообщает браузеру, что нужно загрузить файл в память сразу после загрузки страницы. Второй — о необходимости автоматически начать его проигрывание, и в этом случае preload считается установленным, даже если это не так. Атрибут controls, если указан, включает отображение элементов управления, таких как кнопка проигрывания/паузы, регулятор громкости и т. д. А с помощью loop="loop" можно зациклить воспроизведение файла. Элемент <video> позволяет указать ширину и высоту окна проигрывателя в атрибутах width и height. Также можно установить изображение, отображаемое до начала воспроизведения видео. Для этого необходимо сообщить его адрес в атрибуте poster

<audio src="song.mp3" controls="controls">
   Ваш браузер не поддерживает HTML 5
</audio>

Можно сообщить проигрывателю несколько различных источников данных, на случай если, например, браузер пользователя не поддерживает какой-то формат. Для этой цели предназначены элементы <source />, размещаемые один за другим внутри <audio> или <video>. В атрибутах src и type указываются адрес ресура и его тип, а в media можно указать тип агента (браузера), для которого он предназначен. Допустимые значения media описаны в главе «Ссылки».

<video poster="preview.jpg" width="320" height="240">
   <source src="video.3gp" type="video/3gpp" media="handheld" />
   <source src="video.ogv" type="video/ogg; codecs=theora,vorbis" />
   <source src="video.mp4" type="video/mp4" />
</video>

При использовании <source /> стандартом HTML5 запрещается использовать атрибут src в самом проигрывателе, поскольку это взаимоисключащие способы сообщить браузеру источник данных. Из нескольких же источников, перечисленных в элементах <source />, он самостоятельно выберет наиболее подходящий, основываясь на значениях атрибутов type и media. В type, кроме MIME-типа, можно указать кодек, необходимый для проигрывания ресурса (см. пример выше).

В HTML5 появился уникальный элемент для отображения графики — это <canvas>. Он поддерживает только атрибуты width и height, определяющие его размеры. Содержимое элемента отображается только в браузерах, которые его не поддерживают. Вся же функциональность, связанная с рисованием, реализуется с помощью скриптования. Рассмотрение этих возможнстей выходит за рамки этого курса и будет рассмотрено в отдельной статье.

<canvas id="myCanvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,80,100);
</script>

В примерах курса мы уже неоднократно упоминали элемент <script>. Он предназначен для подключения к документу различных клиентских (т. е. выполняемых в браузере) скриптов. Можно вставить скрипт непосредственно в содержимое элемента или вынести его в отдельный файл, указав его адрес в атрибуте src. Язык скрипта определяется атрибутом type, в котором указывается соответствующий ему MIME-тип. В отличие от HTML 4, в пятой версии этот атрибут не обязателен. Если type не указан, то его значение считается равным text/javascript, что соответствует языку JavaScript.

Если в процессе загрузки документа браузер встречает скрипт, то он немедленно начинает его выполнение, прекращая дальнейшее отображение страницы до окончания загрузки документа. Это связано с тем, что в скрипте могут быть команды, влияющие на внешний вид тех или иных элементов страницы, и браузер считает необходимым выполнить скрипт и догрузить документ, прежде чем прорисовывать его содержимое на экране. Булев атрибут defer="defer" элемента <script> сообщает браузеру, что скрипт должен быть выполнен только после загрузки всей страницы, а следовательно нет нужды приостанавливать ее вывод. В стандарте HTML5 добавлен еще один булев атрибут — async="async". Если он установлен и поддерживается браузером, то подключаемый скрипт выполняется в отдельном потоке, независимо от основного потока вывода страницы, а defer попросту игнорируется. Атрибуты defer и async применяются только вместе с src, т. е. когда скрипт подключается из отдельного файла.

Из соображений безопасности любой браузер позволяет отключить выполнение скриптов на странице. Для таких случаев был придуман тег <noscript>, содержимое которого отображается только если скрипты отключены или не поддерживаются.

    5 / 870


1092

Эта статья находится в разделах:

Краткий курс HTML 5

Мультимедиа и скрипты
Свернуть