- OGG - более новый формат. Был разработан около десяти лет назад некоммерческой организацией Xiph.org для хранения аудио- и видеоинформации. Файлы этого формата имеют расширения ogg (универсальное расширение), oga (аудио- файлы) и ogv (видеофайлы); последние два расширения встречаются редко.
- MP4 - также "новичок". Был разработан организацией Motion Picture Expert Group (Экспертная группа по вопросам движущегося изображения; также известна как MPEG) в 1998 году для хранения аудио- и видеоданных. Файлы этого формата имеют расширение mp4.
- QuickTime - формат очень старый, он старше даже WAV. Был разработан Apple в 1989 году для хранения аудио- и видеоданных. Файлы такого формата имеют расширение mov.
Теперь рассмотрим форматы кодирования аудио и видео, поддерживаемые современными Web-обозревателями.
- PCM (Pulse-Coded Modulation, импульсно-кодовая модуляция) - самый простой и самый старый формат кодирования. Он даже не поддерживает сжатие информации. Служит для кодирования аудиоданных.
- Vorbis - более современный формат кодирования. Был представлен организацией Xiph.org (разработчиком формата файла OGG) в 2002 году. Используется для кодирования аудиоданных.
- AAC (Advanced Audio Coding, развитое кодирование аудио) - не очень новый формат кодирования. Был разработан организацией Motion Picture Expert Group в 1997 году. Применяется для кодирования аудиоданных.
- Theora - пожалуй, самый "молодой" формат кодирования. Он также бы разработан организацией Xiph.org несколько лет назад. Используется для кодирования видеоданных.
- H.264 - тоже очень "молод". Был представлен организациями Motion Picture Expert Group и Video Coding Experts Group (Группа экспертов по кодированию видео) в 2003 году. Предназначен для кодирования видеоданных.
Почти все эти форматы являются открытыми. Исключения - формат файлов QuickTime, принадлежащий Apple, и формат кодирования H.264, защищенный более чем сотней патентов.
Осталось выяснить, какие сочетания форматов файлов и форматов кодирования используются в Web-дизайне и какие Web-обозреватели их поддерживают. Порывшись в Интернете и немного поэкспериментировав, автор свел эти данные в табл. 4.1.
Таблица 4.1. Сочетания формата мультимедийных файлов и форматов кодирования аудио и видео, используемые в Web-дизайне, и поддержка их современными Web-обозревателями
Файлы, содержащие только аудио
Файлы, содержащие аудио и видео
| Аудио | Видео | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|---|
| WAV-PCM | * | * | * | ||
| OGG-Vorbis | * | * | * | ||
| MOV-AAC | * | ||||
| OGG-Vorbis | OGG-Theora | * | * | * | |
| MOV-AAC | MOV-H.264 | * | |||
| MP4-AAC | MP4-H.264 | * |
Как видим, разные Web-обозреватели поддерживают различные форматы. Из-за этого у нас как у Web-дизайнеров могут быть проблемы...
Типы MIME
По сети передаются самые разные данные: Web-страницы, графические изображения, аудио- и видеофайлы, архивы, исполняемые файлы и пр. Эти данные предназначены разным программам. К тому же, с разными данными программа, принявшая их, может поступить по-разному. Так, Web-обозреватель при получении Web- страницы или графического изображения отобразит их на экране, а при получении архива или исполняемого файла - откроет или сохранит его на диске.
Всем передаваемым по сети данным присваивается особое обозначение, однозначно указывающее на их природу, - тип MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения почты Интернета). Тип MIME присваивает данным про- грамма, их отправляющая, например, Web-сервер. А принимающая программа (тот же Web-обозреватель) по типу MIME принятых данных определяет, поддерживает ли она эти данные, и, если поддерживает, что с ними делать.
Web-страница имеет тип MIME text/html. Графическое изображение формата GIF имеет тип MIME image/gif. Тип MIME исполняемого файла - application/ x-msdownload, а архива ZIP - application/x-zip-compressed. Свои типы MIME имеют и мультимедийные файлы.
Вот о мультимедийных файлах и их типах MIME мы и поговорим.
Ранее было сказано, что современные Web-обозреватели работают с очень ограниченным набором форматов мультимедийных файлов из нескольких десятков существующих. Более того, разные Web-обозреватели поддерживают различные форматы. Поэтому Web-обозреватель должен определить, поддерживает ли он формат полученного файла, т. е. стоит ли его вообще загружать. Как это сделать, мы уже знаем - по типу MIME этого файла.
В табл. 4.2 перечислены типы MIME форматов мультимедийных файлов, поддерживаемых Web-обозревателями на данный момент.
Таблица 4.2. Типы MIME форматов мультимедийных файлов, поддерживаемых современными Web-обозревателями
| Формат файлов | Тип MIME |
|---|---|
| WAV | |
| audio/wave | |
| audio/wav | |
| audio/x-wav | |
| audio/x-pn-wav | |
| OGG | |
| audio/ogg (для аудиофайлов) | |
| video/ogg (для видеофайлов) | |
| application/ogg | |
| MP4 | video/mp4 |
| QuickTime | video/quicktime |
Как видим, один формат файлов может иметь несколько типов MIME. Обычно выбирается самый первый из списка как самый предпочтительный.
Вооружившись необходимой теорией, приступим к практике. Сейчас мы выясним, как HTML 5 позволит нам поместить аудио или видео на Web-страницу.
Вставка аудиоролика
Для вставки на Web-страницу аудиоролика язык HTML 5 предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:
<AUDIO SRC="sound.wav"></AUDIO>
Встретив тег <AUDIO>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web- страницу элементы управления, с помощью которых посетитель запускает воспроизведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <AUDIO>, которые мы скоро рассмотрим.
Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).
По умолчанию Web-обозреватель не будет воспроизводить аудиоролик. Чтобы он это сделал, в теге <AUDIO> нужно указать особый атрибут AUTOPLAY. Это действительно особый атрибут: он не имеет значения - достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):
<P>Сейчас вы услышите звук!</P>
<AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>
По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно - аудио нужно не смотреть, а слушать). Но если в теге <AUDIO> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web- страницы, где проставлен тег <AUDIO>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
<P>Нажмите кнопку воспроизведения, чтобы услышать звук.</P>
<AUDIO SRC="sound.ogg" CONTROLS></AUDIO>
Атрибут без значения AUTOBUFFER имеет смысл указывать в теге <AUDIO> только в том случае, если там отсутствует атрибут AUTOPLAY. Если он указан, Web- обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика - это позволит исключить задержку файла перед началом его воспроизведения.
Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.2 придется указать имя файла, в котором он хранится.
Откроем Web-страницу index.htm и впишем в раздел тегов тег <AUDIO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.
Листинг 4.2
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег AUDIO</TITLE>
</HEAD>
<BODY>
<H1>Тег AUDIO</H1>
<P>Тег AUDIO служит для вставки на Web-страницу аудиоролика.</P>
<H6>Пример:</H6>
<PRE><AUDIO SRC="sound.wav" CONTROLS></AUDIO></PRE>
<H6>Результат:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</BODY>
</HTML>