Артефакт

Урок 12. Внедряемые объекты

Сегодняшний урок будет писаться левой пяткой, вычитываться одним глазом и выкладываться на сайт через левое плечо. А всё потому, что речь пойдёт о вещах стыдных, но в ранней дизайнерской юности очень привлекательных. Короче говоря, о всякой разной мультимедии аж прямо на веб-страницах. Той самой мультимедии, полезность и нужность которой для веб-дизайнера я признáю в тот день, когда обнаружу, что Экслер установил у себя на сайте в качестве фона песню «Подружки мои, не ревнуйте».

Возможно, я слишком категоричен. Да, Flash — неплохая вещь, если используется по назначению, а не для рисования жутких заставок 1024х768 с вращающейся надписью «купи стеклопакет» синим полужирным курсивным Таймсом сорок шестого кегля на коричневом фоне. Java тоже ничего, особенно если забыть о полуторамегабайтном апплете на страничке со ссылкой на мой сайт (я попал туда со страницы статистики, из принципа дождался загрузки и увидел жуткую вращающуюся хренотень невообразимых размеров и три кнопки 88х31, почему-то ужатые до размера 73х26; называлось это гордо: «Мои Links»). Музыку я вообще-то люблю, но не тогда, когда мне предлагают слушать зацикленную мидишку продолжительностью в три с половиной такта forever.

Поэтому я просто вкратце объясню, какие телодвижения надо произвести для того, чтобы воткнуть на страницу одну из перечисленных ниже мигалок или пищалок. Договорились?

Звук

Если вам действительно приспичило озвучить свою страницу, вот простейшая инструкция:

<bgsound src="file.mid" loop=infinite>

Для того, чтобы файл проигрывался несколько раз (infinite даёт бесконечный цикл), задайте количество повторений в параметре loop, например: loop=1. Параметр src определяет имя музыкального файла.

А вот несколько более продвинутый способ:

<embed src="file.mid" hidden="true" autostart="true" loop="true">
</embed>

Список основных параметров контейнера embed:

1. height: задает вертикальный размер панели управления;
2. width: задает горизонтальный размер панели управления;
3. autostart: определяет возможность автозапуска при загрузке, принимает значения true или false;
4. loop: задает количество повторений. Возможные значения: true, false или число;
5. hidden: позволяет скрыть панель управления. Принимает значения true или false;
6. src: указывает на URL проигрываемого файла;
7. pluginspage: указывает на URL плагина для проигрывания данного типа файлов;
8. bgcolor: задает фон объекта;
9. type: указывает на тип проигрываемого файла;
10. quality: указывает на качество проигрываемого файла;
11. alt: задает альтернативное содержание;
12. volume: устанавливает громкость звучания (0–100%).

В приведённой ниже таблице перечислены типы MIME (параметр type) для различных расширений музыкальных файлов:

Тип MIME Расширение файла
audio/basic .au
audio/x-wav .wav
audio/x-aiff .aif, .aiff
audio/x-midi .mid, .midi
audio/x-pr-realaudio .ra, .ram
audio/x-mpeg .mpg, .mpeg, .mp2, .mp3

Если вы хотите управлять проигрыванием файла нестандартными способами (не при помощи панели управления), используйте JavaScript. Вот некоторые из методов, поддерживаемых объектом embed: play, pause, stop, rewind, mute.

А вот пример («В лесу родилась ёлочка», advanced edition):

Для вставки видеофайлов тоже используется embed, всё делается практически так же, как и в случае со звуком.

Flash

В простейшем случае размещаемый на веб-странице ролик Flash описывается следующим образом:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave * /cabs/flash/swflash.cab#version=4,0,2,0" width="ширина_ролика" height="высота_ролика"> <param name=movie value="имя_ролика.swf"> <param name=quality value=high> <embed src="имя_ролика.swf" quality=high pluginspage="http://www.macromedia.com/shockwave * /download/index.cgi?P1_Prod_Version= * ShockwaveFlash" type="application/x-shockwave-flash" width="ширина" height="высота"> </embed> </object>

Обратите внимание на звёздочки в коде: эта страница недостаточно широка для того, чтобы уместить длинные пути, в рабочем коде никаких переносов быть не должно.

Пример использования приведённого выше кода (часики стащены у Cooler’а, который, в свою очередь, утащил их откуда-то ещё; показывают локальное время на клиентском компьютере; весит это удовольствие меньше килобайта):

Индивидуальны здесь только имя файла .swf и размеры ролика в пикселах, в остальном код универсален и рассчитан на работу в браузерах, понимающих как <object>, так и <embed>. При отсутствии поддержки Flash посетителю будет предложено установить соответствующий plugin.

Java-апплеты

Для того, чтобы суметь поместить на страницу Java-апплет, большого ума не надо. Достаточно прочитать вот этот фрагмент кода:

<applet code="Lake.class" width=150
        height=220 codebase="images/lessons/">
    <param name="image" value="images/lessons/bill.jpg">
</applet>

В данном случае апплету передаётся единственный параметр, а именно — имя файла картинки, которой предстоит раздражать глаза посетителей. Кроме этого, конечно, не помешает указать, где апплет хранится и как он называется.

Пример использования: композиция «современный Тантал». Основана на восемнадцать раз обошедшем весь интернет апплете Lake.class, от которого судьба меня хранила вплоть до сегодняшнего дня. Отчасти оправдаюсь малым размером файла: всего 4,74 Кб.

Главная проблема разработчиков, пользующихся ворованными апплетами — разобраться, какие параметры им (апплетам) нужны. Иногда эту задачу разрешить так и не удаётся, что, разумеется, положительно сказывается на дизайне.

Конечно же, на веб-страницы можно помещать не только звук, видео, апплеты и ролики Flash. Есть ещё Shockwave, ActiveX и многое другое, чуть ли не каждый месяц появляются новые мультимедийные форматы… но для браузера все они остаются объектами object или embed. На чём и успокоимся.

Урок 11. Image Maps | Урок 13. CSS

Новости раздела

4 августа 2008 г.
Copy Editing: последняя часть

Ещё на сайте

Библиотека
Языки
Друзья
Канада
Авторский угол

Интернет

CPAN
Citforum
W3C.org
useit.com
Типомания
Code Charts
ру/ководство
Лаборатория dk
WebReference.com
Спецификация Perl
Заметки HTML-кодера
Анатомия Adobe Photoshop
The Apache Software Foundation


Рейтинг@Mail.ru

wordpress statistics

Рейтинг@Mail.ru