Звук и видео на страничке

Легко сделать страничку, после загрузки которой начинает звучать музыка. По статистике, особого восторга от них мало кто испытывает, навигация по такому сайту замедлена, но возможность такая есть, если использовать тэг <embed>. Действие этого элемента следующее: после загрузки страницы автоматически загружается и проигрывается звуковой файл. При этом в окне появляется панель проигрывателя (или пульт управления).

Пример: <embed src=" http://mymusick.ru/osen.mid " autostart=" true ">

Как всегда, тут не все так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных Обозревателях эта панель выглядит и, самое обидное, ведет себя по-разному.

Элемент <embed> может иметь следующие атрибуты:

width - ширина панели в пикселях (можно и в процентах);
height - высота панели в пикселях (или процентах);
align - расположение панели относительно текста, возможные значения left, right, center; hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию);
autostart - значение true - проигрыватель стартует автоматически, false - ждет нажатия на кнопку "воспроизведение";
loop - цикл, т.е. при значении true мелодия будет проигрываться по кругу, а при значении false - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE.

Пример: <embed src=" http://mymusick.ru/osen.mid " width=" 70 " height=" 45 " align=" left " hidden=" false " autostart=" false " loop=" true ">

В данном примере появится панель управления проигрывателя с тремя кнопками: воспроизведение, пауза и остановка, а также полоса поиска. Воспроизведение звукового файла начнется после нажатия кнопки “воспроизведение” и будет повторяться бесконечно.

Некоторые Обозреватели поддерживают еще атрибут controls, который позволяет сконфигурировать панель управления. Он может иметь следующие значения:

console - панель обычного размера;
smallconsole - панель меньшего размера;
playbutton - вместо всей панели только кнопка "воспроизведение";
pausebutton - вместо всей панели только кнопка "пауза";
stopbutton - вместо всей панели только кнопка "стоп";
volumelever - вместо всей панели только регулятор громкости.

Элемент <embed> поддерживает звуковые файлы с расширениями mid, wav, aiff, au, видеофайлы avi, mov.

Элемент <bgsound> задает фоновый звук для страницы, т.е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Обозревателем Netscape не поддерживается. Может иметь аттрибут loop, определяющий количество повторов фрагмента. Пример использования:

<bgsound src=" http://mymusick.ru/osen.mid " loop=" 3 ">

Для вставки видео в HTML можно воспользоваться тегом <img>.

<img dynsrc=" http://myvideo.ru/fish.avi " src=" http://myvideo.ru/error.gif " start=" mouseover ">

Атрибут dynsrc содержит имя видео файла, src - имя графического файла, который будет загружен, если видео файл не будет найден на сервере. Атрибут start указывает, при каком условии начинать воспроизведение: mouseover - если пользователь подвел курсор к изображению.

Flash на странице.

Так называемый Flash-ролик содержится в.sfw файле, который создается в программе Flash. Flash-файл может содержать в себе мультимедийный документ, анимацию, векторную и растровую графику, звук, элементы управления, поддерживающие интерактивность. Для вставки Flash-ролика в HTML документ нужно воспользоваться следующей конструкцией:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="Ширина окна" height="высота окна" codebase="http://active.macromedia.com/flash6/cabs/ 4>swflash.cab#version=6,0,0,0"> <param name="movie" value="имя flash файла (.swf)"> <param name="wmode" value="transparent"> <param name="quality" value="high"> <embed src="имя flash файла (.swf)" quality="high" wmode="transparent" width="ширина окна" height="высота окна" type="application/x-shockwave-flash"> </embed> </object>

Тэг <object> содержит главный параметр - classid, который указывает на Flash-проигрыватель (элемент управления ActiveX). Параметр codebase указывает, где в сети взять Flash-проигрыватель, если он у вас не установлен.

Параметры объекта записываются в тэге <param>. Параметр movie содержит имя.swf файла, wmode - определяет, каким будет фон Вашего ролика. В частности, значение transparent задает прозрачность фона. Параметр quality - указывает на качество воспроизведения.

Тег <embed> вложен внутрь тега <object>. Это сделано для поддержки Flash в разных Обозревателях - старых и новых. Если пользователь использует современный Обозреватель, то читается тэг <object>, затем тэги <param>, загружается компонент ActiveX, файл фильма и начинается его проигрывание. Тег <embed>, вложенный внутрь тега <object>, в этом случае игнорируется. если же пользователь использует более старую версию Обозревателя, все происходит по-другому... Так как теги <object> и <param> не известны старым программам, они их игнорируют — это стандартное поведение Обозревателя, встретившего незнакомый тэг. В этом случае обрабатывается тег <embed>, пользователи, так или иначе, увидят на веб-странице фильм Flash.

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

Активные изображения.

Активные изображения (image maps) - это изображения, чувствительные к щелчкам мыши. Они позволяют создать графические меню произвольной формы. Это изображения с так называемыми активными областями (hot spots), которые ссылаются на адреса других страниц или узлов.

Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, но можно воспользоваться и какой-нибудь программой, например Мар Еdit. Важно оставлять между активными областями немного места, чтобы при чтении активизировалась правильная ссылка. Границы активных областей задаются координатами углов прямоугольника, многоугольника или центра и радиуса круга. Не забудьте перед именем карты в атрибуте usемар записать символ "#":

Пример активных изображений.

<img src="image.gif" alt="изображения" usemap="#imap">
<map name="imap">
<area shape="rect" coords="0,0,100,100" href="url5">
<area shape="rect" coords="100,0,200,100" href="url8 ">
<area shape="default" nohref>
</map>

Чтобы создать карту нужно вставить в тэг <img> атрибут usemap="#name", где name - имя карты (значок # обязателен). Далее задаем активные области карты. Начинаем с тэга <map name="name"> (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тэгом </map>.
Описание каждой активной области изображения в общем виде:
<area shape="форма" coords="координаты" href="адрес"
title="текст">.
Тег <area> имеет следующие атрибуты и их значения:

shape	Описывает форму выделяемой области, возможные значения: rect - прямоугольник circle - круг poly - многоугольник default - определяет всю область, т.е весь рисунок может стать ссылкой.
coords	Координаты, определяющие размеры и положение области на изображении. все координаты отсчитываются в пикселях от левого верхнего угла изображения. количество и порядок значений зависит от значения атрибута shape: rect: - левый-x, верхний-y, правый-x, нижний-y (т.е. сначала координаты левого верхнего угла, затем правого нижнего) circle: - центр-x, центр-y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус) poly: - x1, y1, x2, y2,..., xn, yn (просто перечисляются координаты всех вершин многоугольника).
nohref	определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Например, если вы хотите сделать ссылку не в виде круга, а в виде кольца
alt	Альтернативный текст для выделенной области, используется невизуальными браузерами.
title	Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
target	Значение этого атрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ.

Дата добавления: 2014-10-31