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

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

Элемент <object> предназначен для подключения какого-либо внешнего ресурса и может отображаться, в зависимости от его типа, как изображение, встроенный документ или управляемая плагином область. Адрес ресурса, будь-то изображение, видео-ролик или что-либо другое, указывается в атрибуте data, а его MIME-тип — в type. Если необходимо вставить плагин без указания ресурса, то указывается только type, но в любом случае один из этих атрибутов должен обязательно присутствовать в элементе. Булев атрибут typemustmatch можно применять только одновременно с data и 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, в которых указываются соответственно имя и значение передаваемого параметра.

В HTML 5 наконец-то узаконен элемент <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 />, что вынуждало веб-мастеров размещать один элемент внутри другого.

Для добавления в документ аудио и видео HTML 5 предлагает специальные теги <audio> и <video>. Адрес подключаемого файла указывается в атрибуте src. Если браузер не поддерживает элемент, то он, как и в случае с <object>, просто отобразит его содержимое. Оба этих элемента поддерживают булевы атрибуты preload, autoplay, controls, muted, loop, mediagroup и crossorigin. Первый из них сообщает браузеру, что нужно загрузить файл в память сразу после загрузки страницы. Второй — о необходимости автоматически начать его проигрывание, и в этом случае preload считается установленным, даже если это не так. Атрибут controls, если указан, включает отображение элементов управления, таких как кнопка проигрывания/паузы, регулятор громкости и т. д. С установленным muted в проигрывателе по умолчанию будет выключен звук. А с помощью loop можно зациклить воспроизведение файла.

Атрибут mediagroup предоставляет возможность синхронизировать воспроизведение медиа ресурсов в двух или более проигрывателях. С его помощью можно, например, добавить на страницу дополнительную звуковую дорожку с альтернативным переводом или видео с сурдопереводом. Для этого достаточно указать в соответствующих элементах <audio> и <video> атрибут mediagroup с одинаковым текстовым значением.

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

При необходимости, с помощью CSS можно скрыть «лишний» проигрыватель или, скажем, наложить один на другой. HTML 5 также предлагает программный интерфейс для управления воспроизведением в случае, когда все альтернативные дорожки находятся в одном файле. Однако рассмотрение скриптов выходит за рамки этого курса. По той же причине лишь упомянем атрибут crossorigin. Он устанавливает возможность использования технологии CORS — междоменного доступа к ресурсам. Значение anonymous (или пустая строка) запрещает CORS-запросам доступ к персональным данным, а use-credentials — разрешает. По умолчанию работают только запросы в пределах одного домена.

Элемент <video> позволяет указать ширину и высоту окна проигрывателя в атрибутах width и height. Также можно установить изображение, отображаемое до начала воспроизведения видео. Для этого необходимо сообщить его адрес в атрибуте poster.

Можно сообщить проигрывателю несколько различных источников данных, на случай если, например, браузер пользователя не поддерживает какой-то формат. Для этой цели предназначены элементы <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 /> стандартом HTML 5 запрещается использовать атрибут src в самом проигрывателе, поскольку это взаимоисключающие способы сообщить браузеру источник данных. Из нескольких же источников, перечисленных в элементах <source />, он самостоятельно выберет наиболее подходящий, основываясь на значениях атрибутов type и media. В type, кроме MIME-типа, можно указать кодек, необходимый для проигрывания ресурса (см. пример выше).

В HTML 5 появился уникальный элемент для отображения графики — это <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> сообщает браузеру, что скрипт должен быть выполнен только после загрузки всей страницы, а следовательно нет нужды приостанавливать ее вывод. В стандарте HTML 5 добавлен еще один булев атрибут — async="async". Если он установлен и поддерживается браузером, то подключаемый скрипт выполняется в отдельном потоке, независимо от основного потока вывода страницы, а defer попросту игнорируется. Атрибуты defer и async применяются только вместе с src, т. е. когда скрипт подключается из отдельного файла.

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

<script language="javascript">
<!--
function fun(p)
{
   document.pic.src=p;
}
//-->
</script>
<table>
   <tr>
      <td><video src="pic/no1.flv" name="pic" width="320" height="240" controls></video></td>
      <td><a href="#null" onclick="javascript:fun('pic/no1.flv')">норвегия1</a></td>
      <td><a href="#null" onclick="javascript:fun('pic/no2.flv')">норвегия2</a></td>
      <td><a href="#null" onclick="javascript:fun('pic/no3.flv')">норвегия3</a></td>
   </tr>
</table>

<video id="videoPlayer" src="1.mp4" controls="controls" />
<script type="text/javascript">
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.addEventListener('ended', function(e){
   videoPlayer.src = "2.mp4";
   videoPlayer.play();
});
</script>