Ar-Studio:  

Мультимедиа на Веб-странице

МультимедиаС течением времени WWW стала средством передачи не только текстовых данных и изображений, но и видео, и звука. Большинство элементов мультимедиа, встречающихся в Интернет, основаны на зависящем от времени материале: будь то видео, звук или анимация. Процесс проигрывания можно запустить, остановить или перемотать.   

При создании Web-страниц с мультимедийными элементами надо помнить об используемых в Сети типах файлов, их распространённости и популярности. От этого напрямую зависят размеры аудитории сайта.  

Формат файла Тип файла Расширение
Windows sound Цифровое аудио .wav
MPEG audio Цифровое аудио .mp3
MIDI audio Команды управления звуком .midi
MPEG video Видео .mpeg
Windows video Видео .avi
QuickTime Видео .mov
Macromedia Flash Анимация .swf

Следует помнить о том, что нет браузера, который поддерживал бы все перечисленные форматы. Большинство браузеров поддерживают ограниченный набор форматов мультимедиа.

Связывание и внедрение
Чаще всего возможности проигрывания мультимедиа не являются встроенными. Вместо этого воспроизведение перелагается на вспомогательные приложения или специальные библиотеки, подключаемые к браузерам (плагины). Вспомогательное приложение – это программа, которая автоматически запускается для воспроизведения файла того или иного формата. Плагин находится в непосредственном контакте с браузером при воспроизведении, всё происходит в одном и том же окне, а элемент выглядит как часть страницы. В этом случае говорят о внедрении, а не о связывании. Плагины – это небольшие файлы программного кода, которые обычно хранятся на винчестере. При загрузке браузера происходит инициализация этих файлов. Если на странице обнаружен тег <EMBED>, то выполняется попытка использовать какой-либо из имеющихся плагинов. При отсутствии подходящего плагина используется не внедрение, а связывание с соответствующими программами. Например, чаще всего MP3, MPEG связываются, а WAV, AVI, SWF внедряются.

Связывание выполняется путём создания гиперссылки на определённый мультимедийный файл. Например:
<A HREF=media/cats.mp3>Песенка про котят (1,3 Мб)</A>

Когда пользователь щёлкнет по ссылке, файл загрузится на его компьютер. После этого браузер должен запустить то приложение, которое ассоциировано с данным форматом. Если такого приложения нет, то можно просто сохранить файл для последующего использования. Правилом хорошего тона считается указание размера мультимедийного файла.

Внедрение видео и Flash-анимации
Внедрение видео напоминает добавление изображений. Для этих целей в HTML предусмотрено несколько способов.

Способ 1
Парный тег <EMBED> …</EMBED>
Используемые параметры отличаются от формата внедряемого файла.
QuickTime (.mov) Windows Media (.avi)
MPEG video (.mpeg)

src src URL-адрес видеофайла
autoplay autostart 1 – автоматически запускает видео
controller showcontrols 0 – прячет панель управления
loop loop true – бесконечное повторение
false – воспроизведение один раз
число – указание конкретного числа воспроизведений
width width ширина окна в пикселях или процентах
height height высота окна в пикселях или процентах

Для Flash-анимации некоторые параметры не используются.


HTML-код Отображение в браузере
<body BGCOLOR=#CCC8FC>
<embed src=TROIC.mpeg
showcontrols=1 loop=3 autostart=1> </embed>
</body>

<body BGCOLOR=#CCC8FC>
<embed src=TROIC.mpeg showcontrols=0 loop=true autostart=0></embed>
</body>

<body>
<embed src=clock.swf></embed>
</body>

Способ 2
Помимо тега <EMBED> можно использовать параметр DYNRC тега вставки изображений IMG. В этом случае можно управлять условием, при котором запустится видео – при наведении указателя мыши.

HTML-код Отображение в браузере
<body BGCOLOR=#CCC8FC>
<img dynsrc=TROIC.mpeg start=mouseup loop=3>
</body>

Вставка звука
Звуковые файлы могут быть внедрены аналогично видеофайлам с помощью парного тега <EMBED>. В этом случае все параметры необходимо прописывать.

На звуковые файлы можно создавать гиперссылки. Но интересным можно считать фоновое звучание, то есть внедрение без отведения в окне браузера специального окна. Для этого используется одиночный тег <BGSOUND>

Данный тег может иметь 2 параметра:
1. src –задаёт URL-адрес звукового файла;
2. loop – задаёт зацикливание воспроизведения.
HTML-код Отображение в браузере
<body BGCOLOR=#CCC8FC>
<embed src=pobed.mp3 autostart=0></embed>
</body>
<body>
<img src=hg.jpg hspace=15 align=middle>
<a href=muzik.wav>Скачать мелодию (2,3 Мб)</a>
</body>
<body BGCOLOR=#CCC8FC>
<BGSOUND src=pobed.mp3 loop=true>
</body>

Бегущая строка
Интересным графическим решением является использование бегущей строки. Бегущая строка – это эффект прокручивания текста в заданном поле. Бегущая строка создается с помощью парного тега: <MARQUEE>…<MARQUEE>. Наиболее интересного эффекта от бегущей строки можно добиться, если удачно подобрать параметры:
? WIDH – ширина поля бегущей строки;
? HEIGHT - высота поля бегущей строки;
? HSPACE, VSPACE – отступы по горизонтали и вертикали текста строки от границ поля;
? BGCOLOR – определяет цвет поля бегущей строки;
? ALIGN – задаёт вертикальное выравнивание бегущей строки в поле. Возможные значения:
o TOP (вверху),
o BOTTOM (внизу),
o MIDDLE (посередине).
? DIRECTION – задаёт направление движения. Возможные значения:
o LEFT (слева направо),
o RIGHT (справа налево: по умолчанию).
? BEHAVIOR – определяет характер движения строки. Возможные значения: 
o SLIDE (строка вытягивается из одного края поля и останавливается у другого края), 
o SCROLL (текст появляется от одного края и скрывается у другого),
o ALTERNATE (задаёт переменное направление движения, от одного края к другому, а затем обратно).
? SCROLLDELAY – задёт скорость, тоесть значения в миллисекундах между шагами.

HTML-код Отображение в браузере
<body>
<H2>Ниже расположена<i>"бегущая строка"</i></H2>
<MARQUEE HEIGHT=70 WIDTH=75% ALIGN=MIDDLE BGCOLOR=YELLOW BEHAVIOR=ALTERNATE SCROLLDELAY=100>
<FONT COLOR=RED SIZE=11>
Бегущая строка!!!</MARQUEE>
</body>