ГлавнаяУроки html → Урок 14. Встраивание произвольных объектов (object)

HTML - Урок 14. Встраивание произвольных объектов (object)

Раньше в HTML имелась только одна возможность добавлять мультимедийную информацию на web-страницы - элемент IMG. Он позволял добавлять только изображения, а остальные форматы были закрыты для web. Тогда разработчики браузеров стали добавлять поддержку новых элементов. Так появились теги <embed> от фирмы Netscape и <applet> от фирмы Sun.

Но появление этих элементов не решило всех проблем и тогда в спецификацию HTML был добавлен новый элемент <object>, позволяющий работать с любыми форматами. При этом на компьютере пользователя должно быть установлено приложение или дополнительный модуль к браузеру (плагин), позволяющий просматривать объект соответствующего формата.

Встраиваем звук



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

Код следующий:
<html> <head> <title>Звук</title> </head> <body> <object width="480" height="50" align="center"> <param name="movie" value="Love_Me_Do_Beatles.mid"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed src="Love_Me_Do_Beatles.mid" quality="high" bgcolor="#FFFFFF" autostart="false" width="480" height="50" align="center" type="audio/mid" pluginspage="http://www.macromedia.com/go /getflashplayer"> </object> </body> </html>


Посмотрите на результат у себя и разберем, что же мы написали:

Теги <object></object> позволяют встраивать любой объект заданием его URL.

Теги <param> позволяют задать объекту начальные значения.

Тег <embed> указывается для старых версий браузера, которые не поддерживают теги <object></object> (поэтому параметры повторяются).

Теперь разберем параметры тега <param>:

<param name="movie" value="..."> - задает файл-источник объекта.

<param name="quality" value="..."> - задает качество отображения объекта, возможные значения: high (высокое), medium (среднее) и low (низкое).

<param name="bgcolor" value="..."> - задает фон для области отображения объекта.

У тега <embed> есть еще параметры:

type - задает MIME-тип встроенного объекта.

pluginspage - указывает на URL приложения, которое необходимо для просмотра встраиваемого объекта.

Встраиваем flash-анимацию

Рассмотрим встраивание flash-анимации в html-страницу. Для этого нам понадобится flash-player (скачать можно по адресу www.macromedia.com) и сама flash-анимация (файл с расширением .swf). Сам файл можно и не скачивать, а лишь узнать ссылку на него. Например, мне очень понравился этот котик:
(поводите вокруг него мышкой). Эта анимация находится по адресу http://dump.nnov.ru/flash/blackcat.swf. Для того, чтобы вставить ее в страницу добавим следующий код:
<html> <head> <title>Анимация</title> </head> <body> <object width="480" height="200" align="center"> <param name="movie" value="http://dump.nnov.ru/flash/blackcat.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed src="http://dump.nnov.ru/flash/blackcat.swf" quality="high" bgcolor="#FFFFFF" width="480" height="200" align="center" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go /getflashplayer"> </object> </body> </html>

Как видите код почти такой же, как в примере со звуком, разница только в URL файлов и их типах. Но элемент <object> для того и существует, чтобы встраивать совершенно разные объекты: картинки, музыку, видео, анимации и т.д. Чтобы все это работало, необходимо указать MIME-тип встраиваемого объекта и иметь нужный плагин.

Типов объектов существует очень много, приведем здесь лишь наиболее популярные:

тип файла расширение MIME-тип
аудиозапись AU.auaudio/basic
аудиозапись MIDI.midaudio/mid
аудиозапись MP3.mp3audio/mpeg
аудиозапись WAV.wavaudio/wav
видео в формате AVI.avivideo/x-msvideo
видео в формате MPEG.mpeg, .mpgvideo/mpeg
видео в формате QuickTime.movvideo/quicktime
трехмерная интерактивная графика в формате VRML.wrlx-world/x-vrml
flash.swfapplication/x-shockwave-flash


На этом урок закончен. На следующем уроке научимся делать навигационные карты.



Предыдущий урок Вернуться в раздел Следующий урок Скачайте одним архивом видеоуроки HTML!

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