Чтение онлайн

на главную

Жанры

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Шрифт:

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. Обычно выбирается самый первый из списка как самый предпочтительный.

Вооружившись необходимой теорией, приступим к практике. Сейчас мы выясним, как 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. Это действительно особый атрибут: он не имеет значения — достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):

Сейчас вы услышите звук!

<AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>

По умолчанию аудиоролик никак не отображается на Web-странице (что, впрочем, понятно — аудио нужно не смотреть, а слушать). Но если в теге <AUDIO> поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web- страницы, где проставлен тег <AUDIO>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

Нажмите кнопку воспроизведения, чтобы услышать звук.

<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>

Тег AUDIO служит для вставки на Web-страницу аудиоролика.

<H6>Пример:</H6>

<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot; CONTROLS&gt;&lt;/AUDIO&gt;</PRE>

<H6>Результат:</H6>

<AUDIO SRC="sound.wav" CONTROLS></AUDIO>

</BODY>

</HTML>

Сохраним Web-страницу в файле с именем t_audio.htm. Поместим выбранный аудиофайл (у автора — sound.wav) в папку, где находятся все файлы нашего Web- сайта (и t_audio.htm в том числе). И сразу же откроем только что созданную Web- страницу в Web-обозревателе (рис. 4.2).

Рис. 4.2. Web-страница t_audio.htm в Web-обозревателе

Мы увидим код примера и, ниже, результат его выполнения — симпатичные элементы для управления воспроизведением аудиоролика. Мы можем нажать кнопку воспроизведения и прослушать его.

Вставка видеоролика

Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Интернет-адрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:

<VIDEO SRC="film.ogg"></VIDEO>

Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика. В зависимости от указанных нами в теге <VIDEO> атрибутов, он может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика.

Как и тег <AUDIO>, тег <VIDEO> создает блочный элемент Web-страницы и поддерживает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:

<VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>

Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит атрибут POSTER тега <VIDEO>; его значение указывает интернет-адрес нужного графического файла:

Поделиться:
Популярные книги

Черный Маг Императора 13

Герда Александр
13. Черный маг императора
Фантастика:
попаданцы
аниме
сказочная фантастика
фэнтези
5.00
рейтинг книги
Черный Маг Императора 13

Последняя Арена 4

Греков Сергей
4. Последняя Арена
Фантастика:
рпг
постапокалипсис
5.00
рейтинг книги
Последняя Арена 4

Маяк надежды

Кас Маркус
5. Артефактор
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Маяк надежды

Великий перелом

Ланцов Михаил Алексеевич
2. Фрунзе
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Великий перелом

Сопротивляйся мне

Вечная Ольга
3. Порочная власть
Любовные романы:
современные любовные романы
эро литература
6.00
рейтинг книги
Сопротивляйся мне

Инквизитор Тьмы 2

Шмаков Алексей Семенович
2. Инквизитор Тьмы
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Инквизитор Тьмы 2

Мастер Разума V

Кронос Александр
5. Мастер Разума
Фантастика:
городское фэнтези
попаданцы
5.00
рейтинг книги
Мастер Разума V

Бандит 2

Щепетнов Евгений Владимирович
2. Петр Синельников
Фантастика:
боевая фантастика
5.73
рейтинг книги
Бандит 2

Истребители. Трилогия

Поселягин Владимир Геннадьевич
Фантастика:
альтернативная история
7.30
рейтинг книги
Истребители. Трилогия

Гардемарин Ее Величества. Инкарнация

Уленгов Юрий
1. Гардемарин ее величества
Фантастика:
городское фэнтези
попаданцы
альтернативная история
аниме
фантастика: прочее
5.00
рейтинг книги
Гардемарин Ее Величества. Инкарнация

Падение Твердыни

Распопов Дмитрий Викторович
6. Венецианский купец
Фантастика:
попаданцы
альтернативная история
5.33
рейтинг книги
Падение Твердыни

"Дальние горизонты. Дух". Компиляция. Книги 1-25

Усманов Хайдарали
Собрание сочинений
Фантастика:
фэнтези
боевая фантастика
попаданцы
5.00
рейтинг книги
Дальние горизонты. Дух. Компиляция. Книги 1-25

Ох уж этот Мин Джин Хо 2

Кронос Александр
2. Мин Джин Хо
Фантастика:
попаданцы
5.00
рейтинг книги
Ох уж этот Мин Джин Хо 2

Энфис 6

Кронос Александр
6. Эрра
Фантастика:
героическая фантастика
рпг
аниме
5.00
рейтинг книги
Энфис 6