2. Язык гипертекстовой разметки
2.9. Мультимедиа
Практически гипермедиа-ссылка мало чем отличается от ссылок иных типов, различие лишь в том, что вместо связи с другими HTML-документами она обеспечивает связь с файлом мультимедиа. Встретив такую ссылку, браузер должен суметь определить тип файла, с которым установлена связь, и обратиться к требуемому вспомогательному модулю, который называется плагин. Вспомогательное приложение вызывается из браузера и воспроизводить файл мультимедиа непосредственно в окне браузера.
Первые версии браузеров не имели встроенных средств для воспроизведения мультимедийных файлов. Если такие ссылки попадались, то сначала требовалось переписать файл на локальный диск, а затем воспользоваться внешней программой для его воспроизведения. Технология подключаемых модулей изменила ситуацию. Теперь для браузеров имеется ряд плагинов, которые представляют собой небольшие программы, совместно работающие с браузером и позволяющие воспроизводить файлы мультимедиа. При открытии файла соответствующего типа необходимый плагин запускается автоматически.
Для воспроизведения файлов мультимедиа (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.) непосредственно в окне браузера можно использовать элемент <embed>. Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от атрибутов тега <embed>.
Тег <embed> имеет ряд атрибутов:
- align – выравнивание объекта на странице и способ его обтекания текстом;
- height – высота объекта;
- hidden – указывает, скрыть объект на странице или нет;
- hspace – горизонтальный отступ от объекта до окружающего контента;
- pluginspage – адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру;
- src – путь к файлу;
- type – MIME-тип объекта;
- vspace – вертикальный отступ от объекта до окружающего контента;
- width – ширина объекта.
Браузер не всегда может распознать тип файла по его расширению, поэтому лучше указывать его тип с помощью атрибута type, который устанавливает MIME-тип для данных. Допускается устанавливать сразу несколько значений, разделяя их запятыми.
MIME – спецификация для передачи по сети файлов различного типа: изображений, музыки, текстов, видео, архивов и др. (табл. 4). Указание MIME-типа используется в HTML обычно при передаче данных форм и вставки на веб-страницу различных объектов.
4. Пример MIME-типа
| Расширение файла |
Тип данных |
| avi |
video/avi |
| avi |
video/msvideo |
| avi |
video/x-msvideo |
| mp3 |
audio/mpeg3 |
| mp3 |
audio/x-mpeg-3 |
| mp3 |
video/mpeg |
| mp3 |
video/x-mpeg |
| mpeg |
video/mpeg |
| mov |
video/quicktime |
Листинг 7. Пример воспроизведения файлов мультимедиа.
<!DOCTYPE html>
<html>
<head>
<title>Мультимедиа</title>
</head>
<body>
<embed src="images/tree.swf" width="400" height="300" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</body>
</html>
Показать результат листинга 7
В HTML 5 добавлены элементы video и audiо, которые позволяют встраивать видео- и аудиоконтент прямо в веб-документы без использования плагинов.
Тег <audio> позволяет добавлять, воспроизводить и управлять настройками аудиозаписи на веб-странице. Он имеет следующие атрибуты:
- autoplay – звук начинает играть сразу после загрузки страницы. В качестве значения указывается autoplay, допустимо вообще не указывать значение;
- controls – добавляет панель управления к аудиофайлу. В качестве значения указывается controls, допустимо писать атрибут без значения;
- loop – зацикливает воспроизведение аудио, чтобы оно повторялось с начала после завершения. В качестве значения указывается loop, допустимо писать атрибут без значения;
- preload – используется для загрузки файла вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay. Может принимать значения: none (не загружать файл), metadata (загрузить только служебную информацию) и auto (загрузить файл целиком при загрузке страницы);
- src – путь к воспроизводимому файлу.
Тег <video> позволяет добавлять, воспроизводить и управлять настройками видеоролика на веб-странице. Он имеет следующие атрибуты:
- controls – добавляет панель управления к видеоролику. Вид панели и ее содержимое зависит от браузера и может в себя включать: кнопка воспроизвести, пауза, перемотка, переход в полноэкранный режим; ползунок для изменения уровня громкости и др.;
- height – задает высоту области для воспроизведения видеоролика;
- loop – зацикливает воспроизведение видео, чтобы оно повторялось с начала после завершения;
- poster – адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится;
- preload – используется для загрузки видео вместе с загрузкой веб-страницы;
- src – путь к воспроизводимому видеоролику;
- width – задает ширину области для воспроизведения видеоролика.
Теги <video> и <audio> для указания файла могут использовать атрибут src или вложенный тег <source>.
Листинг 8. Пример использование тега <audio>.
<!DOCTYPE html>
<html>
<head>
<title>audio</title>
</head>
<body>
<p>Хитмесяца</p>
<audio controls>
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>
Показать результат листинга 8
|
