Рис. 4.11. Ссылки на мультимедиа
В листинге 4.10 приведен пример кода для создания ссылок на мультимедиа.
Листинг 4.10. Ссылки на мультимедиа<html>
<head>
<title>Ссылки на мультимедиа</title>
</head>
<body>
<a href="test.mp3" title="Test">Test audio</a>
</body>
</html>
Указание ссылки на объект – самый простой вариант для реализации доступа к нему. Плюсом этого способа являются маленький объем страницы и простота использования. С помощью ссылки посетитель может сохранить файл у себя на компьютере, а затем проиграть его наиболее подходящим для себя проигрывателем. Для удобства посетителей сайта можно указывать размер мультимедийного файла.
Однако этот способ не помогает, если нужно, чтобы пользователь посмотрел Flash-файл. С их помощью обычно «раскрашивают» сам сайт; яркие и динамичные Flash-объекты могут нести смысловую нагрузку и быть неотъемлемой частью страницы, поэтому их удобнее встраивать сразу в страницу, а не передавать по ссылке. Хотя, если ваш Flash-мультик – самостоятельное произведение, можно использовать способ со ссылками.
Встраивание объектов
Итак, есть способ загрузить наш мультимедиа-файл на страницу сразу, при этом надо учитывать, с помощью какой программы будет воспроизводиться файл, потому что загружать динамический объект нужно вместе с проигрывателем. Для обращения к этой программе необходимо использовать элемент OBJECT. Он позволит управлять многими параметрами проигрывателя. В предыдущих версиях языка для встраивания объектов использовали элементы EMBED и APPLET, но сейчас рекомендуют к использованию именно OBJECT. Этому элементу необходим закрывающий тег </OBJECT>.
Примечание
В последнем стандарте принято использование элемента OBJECT, но, чтобы избежать проблем у пользователей, которые работают со старыми версиями браузеров, не распознающими этот элемент, рекомендуется внутрь его встраивать элемент EMBED.
Этот элемент предоставляет большие возможности для управления встраиваемым объектом. Внутри тегов <OBJECT> и </OBJECT> могут находиться элементы PARAM, которые не требуют наличия закрывающего тега. С их помощью программам воспроизведения передают параметры, указывающие вид проигрывателя, тип воспроизведения и множество других параметров. С точки зрения управления содержимым и внешним видом сайта это очень удобно. Создатель сайта получает гибкий инструмент для управления воспроизведением мультимедиа на странице. В результате сайт выглядит и работает именно так, как хочется вам.
Начнем рассмотрение встраивания объектов с основного элемента, необходимого для этого, – элемента OBJECT.
Атрибуты элемента OBJECT
Этот элемент позволяет встроить на сайт любой мультимедиа-объект вместе с программой обработки данного объекта. В этом разделе мы рассмотрим вопросы встраивания музыки, видео и Flash-анимации. Однако возможности элемента OBJECT намного шире: в принципе, вы можете встраивать в страницу любое активное содержимое, главное, чтобы у пользователя была программа для обработки этого объекта.
Элемент OBJECT использует программы, находящиеся на компьютере посетителя, и с их помощью воспроизводит активное содержимое. Он может использовать программу проигрывания по умолчанию для конкретного типа файлов, если этот тип файлов знаком браузеру, или использовать конкретную указанную вами программу, если она есть на компьютере пользователя.
У этого элемента много атрибутов. Очевидно, что не все они являются обязательными, точнее, у этого элемента нет строго обязательных атрибутов. Однако среди них можно выделить наиболее важные, которые упростят и ускорят обработку вашего объекта браузером.
Атрибут classid указывает адрес программы, которая будет работать с объектом. В качестве значения этого атрибута можно указывать полный или относительный путь к файлу программы. Это не всегда удобно, потому что на разных компьютерах программы располагаются в разных местах, а на серверах обычно не бывает программ, необходимых для воспроизведения мультимедиа-файлов. Удобнее второй метод: использование идентификатора зарегистрированного ActiveX-приложения. В этом случае перед самим идентификатором должно стоять ключевое слово clsid, как в листинге 4.11. Чаще всего применяют именно второй вариант, потому что он универсален. Идентификаторы для различных приложений и активных объектов легко найти в Интернете.
Атрибут codetype должен принимать значение, содержащее MIME-тип объекта, который указан в атрибуте classid. Браузер использует эту информацию для подготовки ресурсов, необходимых для запуска файла.
Совет
MIME-тип (Multipurpose Internet Mail Extensions) – стандарт, используемый в Интернете, для указания типа объекта. Тип, соответствующий вашему объекту, можно посмотреть в реестре. Для этого в папке HKEY_CLASSES_ROOT нужно открыть папку с разрешением, соответствующим вашему объекту, и в строке Content Type будет указан MIME-тип объекта.
В листинге 4.11 показано применение атрибутов classid и codetype.
Листинг 4.11. Использование атрибутов classid и codetype<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype= "audio/mp3">
</object>
</body>
</html>
В примере указан идентификатор для Проигрывателя Windows Media, а тип – для проигрывания МР3-файла. При просмотре страницы вы увидите проигрыватель, готовый к запуску (рис. 4.12).
Рис. 4.12. Вставка Проигрывателя Windows Media
Атрибут data в качестве значения принимает адрес файла, который необходимо запустить с помощью проигрывателя. Правда, такой метод определения файла используется не всегда – иногда имя файла для запуска нужно передавать через элемент PARAM. Путь к файлу необходимо указывать относительно папки, заданной атрибутом codebase. Если значение этого атрибута не указано, то путь следует задать относительно текущего документа.
Атрибут type задает тип объекта, который указан в параметре data. Здесь нужно указывать MIME-тип объекта. Это позволит браузеру выбрать программу для воспроизведения файла. Если вы не укажете конкретную программу для воспроизведения, то браузер сам выберет приложение для воспроизведения файлов заданного типа. Значение атрибута type браузер использует, когда не указано значение атрибута codetype.
В листинге 4.12 приведен код, который запустит файл test. mp3 на проигрывание.
Листинг 4.12. Использование атрибутов data и type<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<object data="test.mp3" type="audio/mp3">
</object>
</body>
</html>
Если вам понадобилось встроить на страницу Java-апплет, используйте атрибут code и в качестве его значения укажите имя класса вашего Java-апплета. По сути этот атрибут используется вместо элемента APPLET.
В листинге 4.13 представлен пример встраивания апплета.
Листинг 4.13. Встраивание Java-апплетов<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Встраивание объектов</title>
</head>
<body>
<object code="clock.class"></object>
</body>
</html>
С атрибутом codebase вы встречались уже несколько раз, он указывает путь к папке, в которой хранятся файлы, используемые этим объектом. Пути ко всем файлам определяются в элементе OBJECT относительно папки, указанной в качестве значения этого атрибута.
Помимо атрибутов, отвечающих за основные функции объекта, нас интересуют атрибуты, позволяющие управлять видом объекта на странице. Именно такие атрибуты элемента OBJECT мы рассмотрим далее.
Для выравнивания объекта на странице служит атрибут align, его значения аналогичны значениям этого атрибута для элемента IMG, но я их повторю на всякий случай.
Горизонтальное выравнивание:
• left – по левому краю;
• right – по правому краю.
Вертикальное выравнивание:
• top – выравнивание верхней границы объекта по самому высокому элементу строки;
• texttop – выравнивание верхней границы объекта по самому высокому элементу текста;
• middle – середина объекта выравнивается по базовой линии строки;
• absmiddle – середина объекта выравнивается по середине строки;
• baseline – выравнивание нижней границы объекта по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница объекта выравнивается по нижней границе текущей строки.
За размеры объекта отвечают атрибуты height и width, они устанавливают его высоту и ширину соответственно. Эти параметры задают размеры окна приложения, которое будет использовано для воспроизведения файла. Иначе говоря, если вы воспроизводите видеофайл, то заданные высота и ширина будут указывать не только размер экрана, в них будет включен еще и размер панели проигрывателя.
Как и для картинок, для объектов можно задавать расстояние до текста с помощью атрибутов hspace и vspace.
Благодаря атрибутам элемента OBJECT вы можете менять общие параметры вашего объекта, но есть еще один очень важный элемент, позволяющий задавать параметры самого приложения, в котором происходит воспроизведение.
Элемент PARAM
Это главный элемент, предназначенный для управления проигрывателем. С его помощью можно управлять панелями проигрывателя, регулировать начальную громкость воспроизведения и другие параметры приложения; в общем, этот элемент позволяет гибко управлять программой, которая воспроизводит мультимедийное содержимое. Команды для каждой из программ обработчиков свои, и их легко можно найти в Интернете.
Элементов PARAM внутри элемента OBJECT может быть много, так как для каждого управляющего параметра нужен свой элемент.
Используют два основных атрибута элемента PARAM: name и value. Первый задает имя параметра приложения (переменной), а value – значение этого параметра.
Элемент PARAM дает неограниченные возможности для управления воспроизведением мультимедиа на вашей странице.
В примере из листинга 4.14 указан параметр AutoStart, в котором можно задать автоматическое начало воспроизведения файла, и параметр URL, в котором задается адрес файла.
Листинг 4.14. Использование элемента PARAM<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300" height="300" Type="audio/x-mpeg">
<param name="FileName " value="test.mp3"/>
<param name="AutoStart" value="false"/>
</object>
</body>
</html>
Теперь подробно рассмотрим встраивание основных типов файлов.
Встраивание аудио
Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого специальный элемент BGSOUND. Он должен располагаться в заголовке документа, его основные атрибуты – src (путь к звуковому файлу) и loop (количество повторных воспроизведений файла). Для управления звуком можно задавать параметр volume, который определяет громкость воспроизведения музыки. Пример установки фонового звука с помощью элемента BGSOUND приведен в листинге 4.15.
Листинг 4.15. Задание фонового звука с помощью элемента BGSOUND<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<bgsound src="test.mp3" loop="1" volume="5" />
</body>
</html>
В случае примера из листинга 4.15 музыка из файла test.mp3 будет проиграна один раз с пятой громкостью.
Есть и другой способ задать фоновую музыку, например ввести на сайт проигрыватель и задать ему нулевые размеры. Этот способ имеет смысл использовать, когда нужно реализовать нестандартное управление воспроизведением музыки на сайте. В таком случае это можно будет сделать через управляющие команды проигрывателя.
В листинге 4.16 приведен пример того, как задать фоновую музыку с использованием элемента OBJECT.
Листинг 4.16. Задание фоновой музыки с помощью элемента OBJECT<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="0" height="0" type="audio/x-mpeg" >
<param name="FileName" value=" test.mp3" />
<param name="AutoStart" value="true" />
<param name="Volume" value="10" />
<param name="PlayCount" value="2" />
</object>
</body>
</html>
В листинге 4.16 используются параметры AutoStart и Volume, которые задают автоматическое начало воспроизведения и громкость звука соответственно, а сам файл для воспроизведения указывается с помощью параметра URL. Количество повторов определяет параметр PlayCount. При обработке кода из листинга 4.16 файл test.mp3 будет проигрываться сразу при открытии страницы с десятой громкостью два раза.
Примечание
В последних версиях браузеров, перед тем как запустить активное содержимое, запрашивается разрешение пользователя на запуск. Если использовать вариант с элементом BGSOUNG, то подобного запроса не будет, а сразу же начнется воспроизведение звука. При использовании второго варианта для запуска активного содержимого необходимо будет получить согласие пользователя.
С фоновым звуком все просто, но его явно недостаточно для создания полноценной мультимедийной галереи, чаще приходится встраивать на страницу музыку вместе с проигрывателем. В таком случае без элемента OBJECT не обойтись, и альтернатив здесь нет.
Начнем с того, что приведем проигрыватель к удобному для посетителя виду. При воспроизведении музыки пропадает необходимость в полном окне проигрывателя и поэтому графический дисплей можно «срезать». Это делается очень просто: нужно изменить высоту объекта, то есть просто опустить атрибут height элемента OBJECT, оставляя проигрыватель без высоты.
Код для такого отображения проигрывателя представлен в листинге 4.17.
Листинг 4.17. Неполное окно проигрывателя<html>
<head>
<title>Встраивание объектов</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="audio/x-mpeg">
<param name="FileName" value="test.mp3" />
<param name="AutoStart" value="1" />
</object>
</body>
</html>
Результат обработки браузером листинга представлен на рис. 4.13.
Рис. 4.13. Аудиопроигрыватель
В примере не заданы ни высота, ни ширина. В случае с проигрыванием музыки в этом нет необходимости.
Итак, у нас есть удобный для посетителя сайта проигрыватель. Единственное, что хотелось бы добавить в него, это возможность видеть название песни и имя исполнителя данной мелодии. Это очень просто сделать: нужно добавить строку параметров: <PARAM name="ShowDisplay" value="1"/>.
Результат добавления такой строки параметров показан на рис. 4.14.
Рис. 4.14. Аудиопроигрыватель с дополнительной информацией
Теперь у нас есть удобный и симпатичный проигрыватель музыкальных файлов.
Примечание
При использовании Проигрывателя Windows Media версии выше 6. 4 параметры могут отличаться. Например, вместо FileName используется параметр URL. Идентификатор clsid для Проигрывателя Windows Media версий выше 6. 4: 6BF52A52-394A-11D3-B153-00C04F79FAA6.
Итак, музыка встроена, но нам не терпится добавить туда еще немного возможностей, например проигрывание видео.
Встраивание видео
Сейчас встраивать видео на сайт можно без опасений – нынешних скоростей доступа в Интернет достаточно, чтобы у пользователей не было проблем с просмотром и скачиванием видео. Тем более что сейчас перемещение видеоархивов в сеть становится весьма популярным. Однако надо помнить, что файлы для потокового видео должны быть небольшими, а если вы хотите поделиться большим фильмом, то лучше выложить его для скачивания по ссылке.
Примечание
Потоковое видео – это видео, для просмотра которого пользователю нет необходимости дожидаться полной загрузки файла. Иными словами, пока одна часть файла скачивается, другая воспроизводится.
Итак, вы определили размер вашего файла и решили, что он подходит для потокового воспроизведения. Теперь нужно выбрать программу для воспроизведения.
В этой части мы будем рассматривать воспроизведение в Проигрывателе Windows Media, однако позже рассмотрим и другие проигрыватели.
Выбор проигрывателя зависит от типа файла, и хотя большинство проигрывателей может воспроизвести любой файл, иногда встречаются исключения. Возьмем для рассмотрения формат AVI как наиболее универсальный. MIME-тип такого файла – video/x-msvideo.
Управление проигрывателем осуществляется с помощью элемента PARAM. Как видно в листинге 4.18, с помощью параметров задаются имя файла для проигрывания, параметры панели проигрывателя. В примере реализован проигрыватель, который после загрузки сразу начинает проигрывание со звуком 20. Вообще не стоит разрешать видеопроигрывателю автоматический старт. Поскольку видео требует много трафика и загружает канал, то лучше решение о старте оставить на усмотрение пользователя.
Листинг 4.18. Встраивание видео<html>
<head>
<title>Встраивание объекта</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300" height="300" type="video/avi">
<param name="Volume" value="20" />
<param name="URL" value="test.avi" />
<param name="AutoStart" value="1" />
</object>
</body>
</html>
Добавить панель с информацией о видео можно так же, как и с аудио, присоединив строку параметров <PARAM name="ShowDisplay" value="1" />.
Таких полезных параметров много, вы их увидите, когда будете знакомиться с возможностями различных проигрывателей.
Главное – помните, что на первом месте должно стоять удобство посетителя вашего сайта, и выбирать элементы проигрывателя нужно с этой точки зрения.