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

Здесь мы указали для видеоролика изображение-заставку, которое будет выведено в панели просмотра перед началом его воспроизведения и которое хранится в файле filmposter.jpg.

Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML- коде придется указать имя его файла.

НА ЗАМЕТКУ

Если вы не найдете видеоролика подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.

Откроем Web-страницу index.htm и впишем в раздел тегов тег <VIDEO>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.3.

Листинг 4.3

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>Тег VIDEO</TITLE>

</HEAD>

<BODY>

<H1>Тег VIDEO</H1>

<P>Тег VIDEO служит для вставки на Web-страницу видеоролика.</P>

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

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

</BODY>

</HTML>

Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл (у автора — film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web- обозревателе (рис. 4.3).

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

Ниже кода примера мы увидим результат его выполнения — панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим "кино". Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.

Дополнительные возможности тегов <AUDIO> и <VIDEO>

Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому- то Web-обозревателю не "по зубам". Как быть?

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

Если мы собираемся указать сразу несколько мультимедийных файлов в одном теге <AUDIO> или <VIDEO>, то должны сделать две вещи.

1. Убрать из тега <AUDIO> или <VIDEO> указание на мультимедийный файл, т. е. атрибут SRC и его значение.

2. Поместить внутри тега <AUDIO> или <VIDEO> набор тегов <SOURCE>, каждый из которых будет определять интернет-адрес одного мультимедийного файла.

Одинарный тег <SOURCE> указывает как интернет-адрес мультимедийного файла, так и его тип MIME. Для этого предназначены атрибуты SRC и TYPE данного тега соответственно:

<VIDEO>

</VIDEO>

Данный тег <VIDEO> определяет сразу два видеофайла, хранящих один и тот же фильм: один — формата OGG, другой — формата QuickTime. Web-обозреватель, поддерживающий формат OGG, загрузит и воспроизведет первый файл, а Web- обозреватель, поддерживающий QuickTime, — второй файл.

Отметим, что тип MIME видеофайла (и, соответственно, атрибут TYPE тега <SOURCE>) можно опустить. Но тогда Web-обозревателю придется загрузить начало файла, чтобы выяснить, поддерживает ли он формат этого файла. А это лишняя и совершенно ненужная нагрузка на сеть. Так что тип MIME лучше указывать всегда.

А если Web-обозреватель вообще не поддерживает теги <AUDIO> и <VIDEO>? В таком случае он их проигнорирует и ничего на Web-страницу не выведет. Однако мы можем указать текст замены, в котором описать возникшую проблему и предложить какой-либо путь ее решения (например, сменить Web-обозреватель). Такой текст замены ставят внутри тега <AUDIO> или <VIDEO> после всех тегов <SOURCE> (если они есть), например, как в листинге 4.4.

Листинг 4.4

<VIDEO>

Ваш Web-обозреватель не поддерживает вывод мультимедийных данных средствами HTML 5. Попробуйте другой.

</VIDEO>

Отметим, что мы не указали в тексте замены теги, создающие абзац. Теги <AUDIO> и <VIDEO> сами по себе — блочные элементы, так что в этом нет нужды.

Вот и все об интернет-мультимедиа и средствах HTML 5 для его поддержки.

Что дальше?

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

В следующей главе нас ждут таблицы.

ГЛАВА 5. Таблицы

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

Что часто встречается в печатных изданиях, помимо текста и картинок? Таблицы! Таблицами пестрят учебники и справочники, таблицы часто попадаются в газетах и журналах, даже художественные произведения иногда огорошивают нас таблицами. И это понятно. Таблицы — лучший способ уместить множество сведений на ограниченной площади страницы.

Предоставляет ли HTML средства для создания таблиц? Да, и уже довольно давно. Сейчас мы с ними познакомимся.

Создание таблиц

Таблицы HTML создаются в четыре этапа.

На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:

<TABLE>

</TABLE>

Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)

На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> (листинг 5.1).

Листинг 5.1

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег создает обычную ячейку, а тег — ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).

Листинг 5.2

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).

Листинг 5.3

<TABLE>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

<TH>Столбец 3</TH>

</TR>

<TR>

<TD>Ячейка 1.1</TD>

<TD>Ячейка 1.2</TD>

<TD>Ячейка 1.3</TD>

</TR>

<TR>

<TD>Ячейка 2.1</TD>

<TD>Ячейка 2.2</TD>

<TD>Ячейка 2.3</TD>

</TR>

</TABLE>

Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.

1 ... 9 10 11 12 13 14 15 16 17 ... 86

На этой странице вы можете бесплатно читать книгу HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов бесплатно.

Похожие на HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов книги

Календарь исполнения желаний. 365 самых сильных практик на каждый день 2015 года - Наталия Правдина - Прочая справочная литература
Миллион растений для вашего сада - Галина Кизима - Прочая справочная литература
Любовь с точки зрения мужчины - Ришат Вахитов - Прочая справочная литература
Числовой код рождения и его влияние на судьбу. Как просчитать удачу - Ирина Михеева - Прочая справочная литература
Китайский язык. Полный курс перевода - Владимир Щичко - Прочая справочная литература
Как сдавать экзамены - Надежда Фадеева - Прочая справочная литература
Мысли и афоризмы древних римлян - Константин Душенко - Прочая справочная литература
Склеивание, облицовка и гнутьё древесины - Илья Мельников - Прочая справочная литература
Справочник но массажу - Владимир Васичкин - Прочая справочная литература
Западная Африка: Нигерия - Илья Мельников - Прочая справочная литература

Оставить комментарий