Воспроизведение мультимедиа

Встроенный медиафайл

Media Player можно встроить в страницу Web, а не открывать его в отдельном окне. В этом случае плеер является элементом страницы, позволяющим осуществить тесную интеграцию звука и изображений с другим содержимым страницы. При встроенном плеере медиа воспроизводится только во время просмотра страницы и останавливается, когда происходит обращение к другой странице.

Способ, которым предоставляется доступ к файлам медиа, зависит в большой степени от возможностей клиентов Web. Для клиентов с более медленными соединениями с Интернет предоставление ссылок на файлы медиа вместе с соответствующей информацией о размерах файлов дает пользователю возможность выбора в отношении продолжения загрузки. Встроенный плеер, заданный для автоматического воспроизведения, может создавать длительные задержки и вызывать недовольство пользователей.

Для клиентов Web c широкополосными соединениями имеется возможность в большей степени использовать варианты дизайна страницы. Если предполагается продолжение просмотра сайта с фоновым или внешним воспроизведением, то можно предоставить ссылки на файлы медиа. С другой стороны, если воспроизведение является существенным для другого содержимого страницы, то медиафайл, скорее всего, должен быть встроен и при открытии страницы запускаться на воспроизведение.

Форматы аудио

Для воспроизведения в Web используется несколько различных звуковых форматов. Они характеризуются маркой компьютерной системы, для обслуживания которой они созданы, и предоставляемым качеством звука. Качество звука зависит от типа технологии сжатия звука, применяемой для оцифровки звукового файла. Этот метод сжатия заключен в звуковом кодеке (алгоритме сжатия/восстановления), который сокращает размеры файлов, удаляя ненужные сигналы или сжимая избыточные или повторяющиеся сигналы. Наиболее популярные звуковые форматы кратко описаны в следующей таблице.

AIFF

Audio Interchange File Format. Разработан для использования на 
компьютерах Apple Macintosh

AU

Разработан для использования, главным образом, на рабочих станциях 
UNIX. Обеспечивает монофоническое воспроизведение

MIDI

Musical Digital Interface. Ограничен воспроизведением звуков, 
создаваемых музыкальными синтезаторами

MPEG

Moving Pictures Expert Group. Используется для воспроизведения 
аудио и видео, характеризуется небольшими размерами файлов и 
хорошим воспроизведением

RA

RealAudio. Патентованный формат для потокового аудио в реальном 
времени. Создает файлы небольшого размера для соединений с узкой 
полосой пропускания. Требуется специальный плеер

WAV

Разработан для компьютеров Windows. Один из наиболее 
распространенных форматов для загрузки файлов

WMA

Windows Media Audio. Разработан для файлов потокового аудио. 
Очень хорошее качество для различных полос пропускания. Один из 
наиболее распространенных форматов

Форматы видео

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

AVI

Audio Video Interleave. Стандартный формат видео для Windows. 
Широко используется для загрузки файлов

MPEG

Moving Pictures Expert Group. Высокая степень сжатия и небольшие 
размеры файлов для воспроизведения аудио и видео

RV

Real Video. Патентованный формат для потокового видео в реальном 
времени. Создает файлы небольшого размера для соединений с 
узкой полосой пропускания

QuickTime

Разработан для компьютеров Apple Macintosh. Файлы имеют 
расширение .mov. Один из наиболее распространенных форматов 
для загрузки в Web. Требуется специальный плеер

WMV

Windows Media Video. Разработан для файлов потокового видео. 
Очень хорошее качество для различных полос пропускания. Один из 
наиболее широко используемых форматов

Независимо от используемого формата соединение с файлами или доступ к потоковому источнику медиа производится одинаковым образом.

Воспроизведение аудио

Файлы аудио можно загружать из Web для локального воспроизведения. Файлы аудио в форматах MPEG и WAV являются наиболее распространенными типами для загрузки. Файлы аудио можно также использовать для потоковой трансляции с компьютера медиасервера. Это может осуществляться в форме широковещания или оцифрованных файлов для получения по запросу. Формат WMA является популярным форматом Windows для потокового аудио.

Соединение с файлами аудио

Файл аудио делается доступным для загрузки и воспроизведения при размещении его в каталоге Web. Доступ к файлу осуществляется через простую ссылку с помощью тега <a>, кодируемого с относительным адресом URL файла. При щелчке на ссылке файл открывается на компьютере клиента во внешнем Media Player. Плеер осуществляет прогрессивную загрузку, так что пользователю не нужно ждать загрузки всего файла, прежде чем начинается воспроизведение. После загрузки файла он становится доступным на ПК пользователя, и его можно повторно воспроизвести локально.

Например, следующие графическая и текстовая ссылки соединяются с файлом аудио формата WAV, находящегося в том же каталоге, что и страница Web. Щелчок на ссылке открывает внешний Media Player для загрузки и воспроизведения. Внешний вид Media Player на компьютере зависит от его конфигурации.

Приведенные выше ссылки кодируются, как показано ниже. Атрибут href тегов <a>, окружающих графическое изображение и текст, является адресом URL локальных файлов аудио в формате WAV.

<a href="PeopleWillCome.wav"><img src="PeopleWillCome.gif" alt="Kansas ballpark"/></a>
<a href="PeopleWillCome.wav">PeopleWillCome.wav (426 KB)</a>

Встраивание файлов аудио

Встраивание Media Player в страницу Web реализуется с помощью тега <object>. Этот тег является обобщенным способом встраивания многочисленных видов объектов в страницу Web. Его общий формат для встраивания файлов аудио показан ниже.

<object classid="classID"
  width="n"
  height="n"
>
  <param name="URL" value="url"/>
  <param name="autoStart" value="true|false"/>
  <param name="uiMode" value="none|mini|full"/>
</object>

Тег <object> является линейным тегом, т.е. он должен быть вложен в блочный тег, чтобы пройти проверку XHTML.

classid является числом, которое идентифицирует тип объекта для встраивания в страницу. Для Media Player этим значением будет:

classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"

Со своими настройками по умолчанию Player выводит видеоэкран и управляющие элементы воспроизведения. Экран используется для вывода визуального сопровождения (цветомузыки), которое изменяется в ответ на аудиосигнал. Применяемый по умолчанию размер Player можно изменить, кодируя атрибуты ширины и высоты, задающие размеры в пикселях.

Встроенный Media Player для аудио представления показан на рисунке 9.4, а его код - на листинге 9.3. Адрес URL указывает на аудиофайл в том же каталоге, где содержится эта страница Web. Player выводится с экраном визуализации и размерами по умолчанию, воспроизведение не начинается, пока не будет нажата кнопка "Play".

(рис 9.3) Встроенный Media Player для воспроизведения аудио файла(рис 9.4) Код встраивания Media Player для воспроизведения аудиофайла<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value="PeopleWillCome.wav"/>
  <param name="autoStart" value="false"/>
</object>

Тег <object> имеет набор параметров запуска ( param ) для Player. Необходимо задать параметр name="URL" и определить расположение value="url" аудиофайла. Будет или нет файл воспроизводиться немедленно после загрузки страницы, задается в параметре name="autoStart". Значение этого параметра по умолчанию value="true" ; задание value="false" требует, чтобы пользователь инициировал воспроизведение, нажимая кнопку "Play" на панели управления. Если видеоэкран выводить не требуется, можно включить значение height="45" ; в этом случае будут выводиться только элементы управления.

Параметр name="uiMode" тега <object> позволяет задать вывод характеристик встроенного плеера. Его значение по умолчанию value="full" создает полный экран вывода и полный набор элементов управления. Со значением value="mini" создается сокращенный экран визуализации и минимальный набор элементов управления без индикатора степени выполнения или кнопок селектора трека. Типичный минимальный вывод показан ниже, в данном случае - с заданной шириной и высотой плеера.

(рис 9.4) Встроенный Media Player в режиме "mini"(рис 9.6) Код для задания Media Player в режиме "mini"<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="150" height="160">
  <param name="URL" value="PeopleWillCome.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="mini"/>
</object>

Программирование плеера

При задании для параметра uiMode значения value="none", элементы управления плеера Media Player не выводятся. Выводится только экран. Это может быть подходящей настройкой, когда плеер запускается автоматически или если пользователь знает, что элементы управления доступны для запуска и остановки воспроизведения в "контекстном меню", выводимом при щелчке правой кнопкой мыши в окне плеера. Однако обычно стандартные элементы управления скрыты, потому что они будут запрограммированы самостоятельно.

Хотя это не учебник по программированию страниц Web, достаточно просто задать свои собственные управляющие кнопки для Media Player. Это сделано для показанного ниже плеера.

(рис 9.5) Программирование Media Player(рис 9.7) Код программирования элементов управления Media Player<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="70" height="70">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="none"/>
</object>

<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
  onclick="Player.controls.stop()"/>

Прежде всего, необходимо задать для Player значение id, чтобы на него можно было ссылаться в сценарии. Здесь id="Player" присваивается тегу <object>. Параметру uiMode задается значение value="none", чтобы подавить вывод элементов управления, автозапуск autoStart выключается, а свойства стиля width и height задают размер экрана визуализации.

При удалении панели управления необходимо создать собственные кнопки "Start" и "Stop" для управления плеером. Эти кнопки создаются с помощью элементов управления <input type="button"/>. (Создание кнопок рассматривается далее).

Чтобы сделать кнопки реагирующими на щелчок мыши, кнопкам добавляется обработчики событий onclick. Эти обработчики событий кодируются с помощью операторов JavaScript для управления плеером. Для кнопки "Start" оператор Player.controls.play() вызывает метод play() плеера Player, чтобы начать воспроизведение, для кнопки "Stop" оператор Player.controls.stop() вызывает метод stop() плеера Player, чтобы остановить воспроизведение. Вот, собственно, и все.

Фактически не требуется даже вообще выводить плеер Player. Для воспроизведения аудио можно скрыть его полностью и включать и выключать звук с помощью запрограммированных кнопок. Задайте в коде для тега <object> значения width и height как 0px и создайте кнопки управления.

(рис 9.6) Кнопки скрытого Media Player(рис 9.8) Код программирования скрытого Media Player<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
</object>

<input type="button" value="Start" 
  onclick="Player2.controls.play()"/>
<input type="button" value="Stop" 
  onclick="Player2.controls.stop()"/>

Так как Media Player невидим, то не имеет значения, где на странице записывается тег <object>.

Если посмотреть внимательно, то можно заметить небольшую точку в нижнем левом углу кнопки "Start". Это Media Player, редуцированный до одной точки, при задании его ширины и высоты равными 0 пикселей. Если желательно полностью исключить точку, включите таблицу стилей для Player с width:0px и height:0px.

Воспроизведение нескольких звуков

После небольшой модификации сценария можно воспроизводить несколько звуков с помощью одного и того же Media Player. В следующем примере проигрываются голоса четырех различных животных при щелчке на четырех отдельных тегах <img/>. Тег <object> скрывает Media Player и не задает никаких тегов <param>. Поэтому никакой файл для воспроизведения не задается; только невидимый плеер встроен в страницу.

(рис 9.7) Воспроизведение нескольких звуковых файлов через один Media Player(рис 9.9) Код для воспроизведения нескольких звуковых файлов через один Media Player<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    width="0" height="0">
</object>

<img src="Bullfrog.gif" alt="Picture of bullfrog"
  onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
  onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
  onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
  onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>

В обработчиках событий требуется пара операторов JavaScript. Первый оператор присваивает звуковой файл свойству URL плеера: Player.URL='filename.wav'; второй оператор запускает его воспроизведение: Player.controls.play(). Не нужно кодировать сценарий stop(), так как звуки будут очень короткими.

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

Даже человек, незнакомый с языком JavaScript, сможет модифицировать и включить этот сценарий в любой тег, который будет использоваться для загрузки и воспроизведения звуковых файлов встроенным плеером Media Player.

Фоновые звуки

Для некоторых страниц может быть нежелательно выводить на экране Media Player или управляющие кнопки. Так будет в случае воспроизведения фоновой музыки или дикторского текста, которое начинается автоматически, когда загружается страница, и останавливается, когда происходит обращение к другой странице. Чтобы воспроизвести фоновый звук, требуется только скрытый плеер, который автоматически запускает аудиофайл.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="BkgndSound.wav"/>
  <param name="autoStart" value="true"/>
</object>

Здесь, так как Player невидим, не имеет значения, где на странице кодируется этот тег <object>. Как только страница заканчивает загружаться, начинается загрузка и воспроизведение звука. Когда происходит переход к другой странице, то воспроизведение аудио останавливается.

Исключенный тег embed

Media Player можно встраивать в страницу Web с помощью тега <embed/>, общий формат которого показан ниже.

<embed src="url" autostart="true|false"/>

Атрибут src является адресом URL файла. Свойство autostart указывает, должен ли файл немедленно начинать воспроизведение, когда открывается страница.

Воспроизведение видео

Нет существенных различий между вызовом и воспроизведением файлов видео по сравнению с файлами аудио. Файлы видео можно загружать из Web для локального воспроизведения. Файлы в форматах AVI и MPG являются наиболее распространенными типами файлов для загрузки. Видео файлы в формате WMA могут передаваться в потоковом режиме с медиасервера. Это может быть живая трансляция или оцифрованные файлы для получения по запросу.

Соединение и встраивание видеофайлов

Для загрузки видеофайла создается ссылка <a> с адресом URL этого файла. Файл загружается и открывается во внешнем Media Player таким же образом, как аудиофайлы.

Следующая ссылка соединяется с видеофайлом формата WMV, находящимся в том же каталоге, что и страница Web. При щелчке на ссылке файл открывается во внешнем Media Player.

Точное поведение Media Player зависит от его конфигурации.

(рис 9.9) Ссылки для воспроизведения видеофайла(рис 9.10) Код соединения с видеофайлом<a href="Casablanca.wmv"><img src="Casablanca.gif" alt="Casablanca"/></a>
<a href="Casablanca.wmv">Casablanca.wmv (484 KB)</a>

Видеофайл можно встраивать в страницу Web с помощью тега <object>.

(рис 9.10) Встроенный Media Player для воспроизведения видеофайла(рис 9.11) Код встроенного Media Player для воспроизведения видеофайла<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value="Casablanca.wmv"/>
  <param name="autoStart" value="false"/>
</object>

Программирование плеера

Такое же программирование, как и в случае аудиофайлов, применимо к видеофайлам. Стандартную панель управления можно удалить из Media Player и заменить программируемыми кнопками. Следующий код и кнопки скрывают вывод Media Player и окружают экран стилизованной рамкой для размещения плеера внутри оформленного тега <div>. Добавлены также кнопки для запуска и остановки плеера.

(рис 9.11) Запрограммированный Media Player(рис 9.12) Код программирования Media Player<div style="border:outset 10">
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="150" height="122">
  <param name="URL" value="Casablanca.wmv"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="none"/>
</object>
</div>

<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
  onclick="Player.controls.stop()"/>

Оформление плеера

С небольшими усилиями можно задать собственное оформление плеера, используя графические изображения для окружения экрана и карту ссылок для создания программных элементов управления. Один из таких способов показан ниже. Экран Player перекрывает изображение телевизионного экрана, снабженного изображениями кнопок запуска и остановки, сформатированными как карта ссылок. Сценарии связываются с картой ссылок для запуска и остановки Player.

Необходимо разместить экран Player поверх изображения телевизора. Поэтому оба тега <img/> и <object> позиционируются абсолютно, чтобы получить наложение. Чтобы облегчить вычисление позиций пикселей, оба тега помещают внутрь тега <div> с относительным позиционированием. Такое размещение дает возможность позиционировать теги <img/> и <object> относительно верхнего левого угла ( 0, 0 ) раздела и позволяет изображению сохранять свое относительное положение в потоке элементов страницы.

<img src="TV.gif" style="position:absolute; border:0" usemap="#ImgMap"/>
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="250" height="150" style="position:absolute; top:18px; left:63px">
  <param name="URL" value="Frankenstein.wmv"/>
  <param name="uiMode" value="none"/>
  <param name="autoStart" value="false"/>
</object>

<map name="ImgMap">
  <area shape="circle" coords="28,168,15" alt="Start"
    onclick="Player.controls.play()"/>
  <area shape="circle" coords="348,168,15" alt="Stop"
    onclick="Player.controls.stop()"/>
</map>
</div>

При открытии страницы видеофайл загружается в Player, но не запускается автоматически. Его параметр uiMode задан как "none", так что сам Player скрыт; виден только экран. Размер экрана и его позиция заданы так, чтобы точно разместиться поверх графического изображения телевизора. Может понадобиться проверить для экрана различные размеры и позиции, чтобы точно попасть в правильное положение поверх изображения.

Вместо применения для управления Player кнопок к изображению телевизора добавлены изображения кнопок для запуска и остановки. Эти две круглые области определены на карте ссылок, чтобы сделать их реагирующими на щелчок мыши. В то время как карты ссылок используются обычно для задания ссылок на страницы с помощью атрибутов href для областей, в данном случае атрибут заменяется обработчиками события щелчка мыши, чтобы запустить и остановить Player.

Доступ к потоковому видео

При наличии адресов URL внешних сайтов можно соединяться с контентом потокового видео. Как и для аудиофайлов URL можно получить из ссылки, если видео воспроизводится через Windows Media Player. Во время воспроизведения видео сделайте щелчок правой кнопкой мыши на экране и выберите "Properties" во всплывающем меню. Из окна "Properties" скопируйте полный адрес URL воспроизводимого потокового файла.

Следующее встроенное видео соединено по этой технологии. В этом случае URL указывает на фрагмент фильма, найденный в Web.

(рис 9.13) Встроенный потоковый видеофайл(рис 9.14) Код встраивания потокового видеофайла<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="400" height="300">
  <param name="URL" value="http://playlist.yahoo.com/makeplaylist.dll?
    id=1021057segment=73208s=1805540029ru=embedded%
    2Eyahoo%2Ecomb=a3qgtq8vgc8s33f0b633c"/>
  <param name="autoStart" value="false"/>
</object>

Многие имеющиеся в Web видеофайлы требуют плату за просмотр. Также часто встречаются видеоплееры, встроенные в страницы сайта с настройками, которые не позволяют получить доступ к окну Properties для получения URL. Надо быть просто терпеливым и настойчивым, чтобы найти видео, с которым можно соединиться. Кроме того, адреса URL постоянно изменяются, и позже может оказаться невозможно соединиться с видео в его исходном местоположении.

Поток живого видео можно захватить и воспроизвести с помощью Media Player. Следующий адрес URL соединения C-SPAIN был определен в окне Properties плеера во время живого вещания.

(рис 9.14) Встроенный поток живого видео(рис 9.15) Код встраивания живого видеопотока<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value="http://play.rbn.com/play.asx?url=
  =cspan/cspan/wmlive/cspan1v.asfproto=mms?mswmext=.asx"/>
  <param name="autoStart" value="false"/>
</object>

Специальные эффекты

Кроме воспроизведения аудио- и видеофайлов, существуют другие способы создания специальных визуальных эффектов на странице Web и присоединения к внешним источникам информации для контента страницы. Существуют, например, некоторые теги XHTML, которые могут прокручивать текст; другие источники информационного содержимого можно встраивать в страницу или присоединять с удаленных сайтов с помощью специальных сценариев, написанных на языке JavaScript.

Тег <marquee>

(Примечание: Тег marquee не считается допустимым элементом согласно стандартам XHTML 1.1. Он представлен здесь в связи с его сохраняющейся популярностью и поддержкой в браузерах. Страницы Web с прологом XHTML 1.1 будут выполняться правильно, даже хотя они и не будут полностью проходить проверку на правильность.)

Тег <marquee> применяется для автоматической прокрутки текста на экране. Текст можно прокручивать влево, вправо, вверх или вниз в определяемой области прокрутки. Он может использовать шрифт с любыми характеристиками. Следующий тег marquee имеет связанные с ним кнопки, чтобы можно было видеть направления прокрутки. Можно сделать паузу в прокрутке, помещая курсор над областью marquee.

Тег <marquee> определяется следующим общим форматом

<marquee
  direction="left|right|up|down"
  loop="n|-1"
  scrollamount="n" ( 6 пикселей по умолчанию)
  scrolldelay="n"  (85 миллисекунд по умолчанию)

    Исключены:

    bgcolor="color""
    height="n"
    width="n"
    hspace="n"
    vspace="n"
>

    Текст для прокрутки

</marquee>

В своей простейшей форме тег может использовать все значения по умолчанию для создания прокручивающегося текста, показанного ниже:

<marquee>Text to Scroll</marquee>

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

Направление прокрутки можно задавать с помощью атрибута direction. Если определено up (вверх) или down (вниз) и если height (высота) для тега <marquee> не задана, используется значение height по умолчанию, равное примерно 200 пикселей, задающее вертикальную область прокрутки. Marquee в начале этой страницы расширяется по высоте в направлении прокрутки вниз или вверх, так как высота не была определена.

Скорость движения управляется атрибутами scrollamount и scrolldelay. Надо проверить несколько значений настройки этих атрибутов, чтобы создать требуемый эффект прокрутки.

Скорее всего, потребуется некоторое дополнительное оформление прокручивающегося текста. Это можно сделать с помощью свойств стиля, связанных с тегом <marquee>. Кодирование следующего marquee показано ниже.

(рис 9.16) marquee с оформлением(рис 9.18) Код для оформления  marquee<div style="text-align:center; background-color:#F0F0F0; padding:5px">
  <marquee direction="left" scrolldelay="50" scrollamount="3"
    style="border:inset 5; padding:5px; width:50%; background-color:#000000;
    color:#FFFFFF; font-family:courier new; font-size:12pt; font-weight:bold"
    onmouseover="this.scrollAmount=0"; onmouseout="this.scrollAmount=3">
      Scrolling Text
  </marquee>
</div>

marquee помещается внутри раздела ( div ), чтобы выровнять его по центру и задать цвет фона, на котором выводится текст. Для marquee задана граница и определен размер в 50% ширины страницы с заданным цветом текста и фона.

Обычно желательно, чтобы пользователи могли делать паузу при прокрутке текста и, тем самым, имели возможность его спокойно прочитать. Это легко сделать, добавляя операторы JavaScript в тег <marquee>. Операторы сценария останавливают прокрутку по событию "указатель мыши над" (свойство scrollAmount задается равным 0) и возобновляют прокрутку по событию "указатель мыши вне" (свойству scrollAmount задается его исходное значение).

Динамический HTML

Хотя это не было подчеркнуто в данном учебнике, но теги XHTML являются программируемыми объектами, которыми можно управлять с помощью процедур JavaScript. Это было продемонстрировано в предыдущих примерах, где обработчики событий добавлялись в теги <img/> и <marquee>, чтобы сделать их реагирующими на действия пользователей с мышью. Связывая процедуры JavaScript с этими и другими тегами, большинство элементов страницы можно сделать реагирующими на события мыши и клавиатуры. Обычно эти события вызывают немедленные изменения в настройках стиля, динамические изменения визуального представления страницы или изменение вывода информации в ответ на запросы пользователя. Такие действия по программированию тегов называют Dynamic HTML (DHTML).

Головоломка ниже является набором изображений GIF, которые запрограммированы для реагирования на события перетаскивания мыши. Фрагмент головоломки надо перетащить на область палитры, чтобы восстановить изображение.

С помощью языка JavaScript можно программировать теги XHTML для создания этих и других типов специальных эффектов на странице Web. Можно также осуществить поиск в Web уже готового кода DHTML, который можно скопировать на страницу Web и модифицировать в соответствии со своими целями. В Web можно найти приложения DHTML для создания меню и методов перемещения, прокрутки текста, визуальных эффектов и слайдшоу, календарей, часов, использования мыши, игр и многих других специальных эффектов. Часто использование этих приложений требует только копирования кода и сценариев с сайта Web и вставки в создаваемую страницу Web.

Функции JavaScript

Существуют тысячи готовых приложений JavaScript, которые можно скопировать из Web и вставить в создаваемую страницу. Следующий календарь и калькулятор были найдены на сайте http://javascript.internet.com/. Обычно все сценарии и соответствующий код XHTML копируют с сайта и сразу вставляют на страницу.

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

Апплеты Java

(Примечание: Прежде чем выполнять апплет Java, компьютер должен иметь установленную среду выполнения Java. Этот встраиваемый модуль доступен для загрузки и установки на сайте http://www.java.com.)

Апплеты являются небольшими программами, написанными на языке программирования Java для встраивания в страницы Web. Апплеты доступны практически для любых применений на странице - игры, моделирование и настольные приложения, такие, как редактирование текста, черчение и рисование и доступ к базам данных. Многие из них можно использовать бесплатно. Апплет упакован как один или несколько загружаемых файлов программ с расширением файла .class. Он помещается на страницу с помощью тега <object> в том месте, где должен появиться. Общая форма тега <object>, используемая для вывода апплета Java, показана ниже.

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="n" height="n">
  <param name="code" value="file.class"/>
  <param name="codebase" value="path"/>
  ...
</object>

Необходимо включить classid для апплета Java; настройки width и height (ширины и высоты) являются необязательными, но могут задаваться для изменения размера области вывода. Чтобы использовать апплет, он должен получить параметры, то есть, значения данных, которые модифицируют апплет в соответствии с существующими потребностями. Эти значения задаются с помощью последовательности тегов <param/>, число и тип которых зависит от назначения апплета. Тег <param/> имеет атрибуты name, для которых задаются атрибуты value, которые позволяют персонализировать апплет.

Необходимо закодировать параметр name="code" ; его значением является имя файла класса апплета. Параметр name="codebase" ; не требуется, если файл класса находится в том же каталоге, что и страница Web, на которой он находится. Иначе значением codebase будет путь доступа к каталогу класса апплета. Для конкретных апплетов могут потребоваться и другие параметры.

Примеры различных типов апплетов и требований к кодированию показаны ниже. Помните, что тег <object> является линейным тегом и должен находиться внутри блочного тега для соответствия XHTML. Блочные теги в следующих примерах не показаны.

Манипуляции с текстом

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

Показанный выше апплет называется RainbowText.class; он был загружен с сайта http://javaboutique.internet.com, предлагающего свободно доступные апплеты. Этот файл класса находится в том же каталоге, что и страница Web. Тег <object> для этого приложения показан ниже.

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="160" height="40">
  <param name="code" value="RainbowText.class"/>
	
  <!-- Required parameters for applet -->
  <param name="text" value="RainbowText"/>
  <param name="fontname" value="impact"/>
  <param name="fontsize" value="24"/>
  <param name="fontstyle" value=""/>
  <param name="bgcolor" value="880000"/>
</object>

Параметр name="code" задает имя файла класса апплета (RainbowText.class). В этом примере параметр name="codebase" не требуется, так как файл класса находится в том же каталоге, что и страница Web. Данный апплет имеет дополнительные параметры, определяющие характеристики строки текста, к которой применяется апплет. Документация апплетов обычно определяет необходимые параметры и диапазоны значений, которые они принимают.

Прокрутка текста

Другие популярные апплеты выполняют прокрутку текста, и многие из них применяют методы, которые невозможно реализовать с помощью тега XHTML <marquee>. Например, апплет с именем Terminal.class, загруженный с того же сайта, создает показанный ниже вывод. Этот апплет прокрутки использует для представления режим пишущей машинки. Файл класса апплета находится в том же каталоге, что и страница Web.

(рис 9.19) Апплет Java для создания прокрутки текста (рис 9.22) Код,  использующий апплет Java для прокрутки текста<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
height="100" width="150">
  <param name="code" value="Terminal.class"/>

  <!-- Required parameters for applet -->
  <param name="line1" value="This is an applet that"/>
  <param name="pause1" value="0"/>
  <param name="line2" value="produces scrolling text"/>
  <param name="pause2" value="0"/>
  <param name="line3" value="in typewriter mode."/>
  <param name="pause3" value="2"/>
  <param name="line4" value=""/>
  <param name="pause4" value="0"/>
  <param name="line5" value=""/>
  <param name="pause5" value="0"/>
  <param name="line6" value=""/>
  <param name="pause6" value="0"/>
  <param name="line7" value=""/>
  <param name="pause7" value="0"/>
  <param name="line8" value=""/>
  <param name="pause8" value="0"/>
  <param name="line9" value=""/>
  <param name="pause9" value="0"/>
  <param name="line10" value=""/>
  <param name="pause10" value="0"/>
</object>

Этот апплет требует использования тегов <param/> для каждых (до) десяти строк текста. Одна пара тегов задает текстовую строку для вывода; другая задает число секунд паузы после вывода строки. Атрибуты width и height задают размеры области вывода.

Игры

Игры с активным действием, аркадные игры, карточные игры, головоломки и другие типы игр доступны в виде апплетов. Версия игры Breakout показана ниже.

Как и многие игры, эта игра требует дополнительных файлов, кроме основного файла класса. Графические и текстовые файлы поддержки часто поставляются упакованными вместе в архиве и распаковываются в папку, которая содержит все файлы, необходимые для выполнения приложения. Иногда в пакете поставляется страница Web с уже встроенным тегом <object>. Чтобы начать игру, достаточно просто открыть эту страницу.

Показанная выше игра была распакована в папку с именем Breakout, которая является подкаталогом каталога текущей страницы Web. Поэтому в следующем теге <object> должен присутствовать параметр name="codebase", задающий путь доступа к файлу breakout.class.

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="466" height="457">
  <param name="codebase" value="Breakout/"/>
  <param name="code" value="breakout.class"/>
</object>

Тикеры

Некоторые апплеты соединяются со службами данных, для предоставления самых свежих новостей, финансовых отчетов, прогноза погоды и других изменяющихся данных. Следующий апплет является примером тикера рынка акций с сайта www.redinews.com. Эта служба, работающая по подписке и требующая определенной платы за доступ к биржевой информации. Тег <object> этого приложения показан ниже.

(рис 9.21) Апплет Java тикера рынка(рис 9.24) Код апплета Java тикера рынка<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="100%" height="25">
  <param name="codebase" value="http://dev.redinews.com"/>
  <param name="code" value="T0404.class"/>
  <param  name="queryid" value="QC30302"/>
</object>

Исключенный тег <applet>

Тег <object>, используемый для встраивания апплетов Java на страницы Web, заменяет исключенный тег <applet>, общий формат которого показан ниже.

<applet code="file.class" codebase="path" width="n" height="n"></applet>

Параметр code задает имя файла класса; параметр codebase задает путь доступа к файлу класса, если он не находится в том же каталоге, что и страница Web. Могут потребоваться необязательные теги <param/>, в зависимости от конкретного приложения.

Использование технологии Flash

(Примечание: Прежде чем использовать приложения Flash, необходимо загрузить и установить с сайта http://www.macromedia.com плеер Flash Player.)

Многочисленные игры и приложения в формате Macromedia Flash доступны для загрузки и размещения на странице Web (http://www.flash-game.net/). Пример такой игры показан ниже.

Файлы Flash имеют расширение .swf. Они размещаются на странице Web с помощью тега <object>. Код для встраивания приведенной выше игры показан ниже.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="250" height="330">
  <param name="movie" value="EggGame.swf"/>
</object>

Отметим, что classid отличается от того, который используется для Media Player или апплета Java. Этот classid предназначен для плеера Flash.

Единственным обязательным параметром является name="movie" со значением, задающим адрес URL файла .swf. Может понадобиться добавить в тег <object> значения ширины и высоты, чтобы задать размер изображения.

Соединение с сайтами с помощью JavaScript

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

Weather Channel (http://www.weather.com), например, позволяет соединяться с локальным прогнозом погоды с помощью небольшого сценария, который создает вывод прогноза погоды на странице.

(рис 9.23) Текущая погода от Weather Channel(рис 9.26) Код для вывода информации о погоде<script src='http://voap.weather.com/weather/oap/31206?template=GENXHpar=1002807763
unit=0key=4b85ab04049dg00730e07efd748e8055'>
</script>

Код предоставляется сайтом, предлагающим услугу, и его можно просто скопировать на страницу. Для получения прогноза погоды необходимо бесплатно зарегистрироваться на сайте Weather Channel и выбрать область прогноза. Отметим, что приведенный выше регистрационный код не является действительным, а служит просто примером кода, полученного после регистрации.

Другим примером соединения с помощью JavaScript является следующий информер заголовков новостей. Щелчок на выводимых ссылках вызывает переход к исходному источнику новостей.

Это приложение с сайта www.news4sites.com, который поддерживает службу предоставления регулярно обновляемых заголовков новостей из различных информационных источников по всему миру. Это приложение бесплатно, потому что включает рекламные ссылки на сайты; платная подписка удаляет рекламу.

Код JavaScript и соответствующий XHTML предоставляются сайтом и копируются на страницу. Не требуется даже знать, что все это означает.

<div id="NEWS">
<table style="width:270px; background-color:#D2EBFF" cellspacing="0" cellpadding="4">
<tr>
  <td style="background-color:#000000; color:#FFFFFF; font-size:12pt; font-weight:bold">
    In the News
  </td>
</tr>
<tr>
<td>
    <span id="ITEMS"></span>
  </td>
</tr>
<tr>
  <td style="background-color:#FFFEE8; font-size:8pt">
    <span id="TIME"></span>
  </td>
</tr>
</table>
</div>

<script src="http://www.news4sites.com/service/newsfeed.php?tech=jsid=2324"></script>
<script>
function LinesdownClassic()
{
  clearTimeout(cfunc)
  var str = ""
  var hn = 0
  var now = new Date()
  for(var i=1;i<6;i++) {
    hn=((ccap+i)<content.length)?ccap+i:ccap+i-content.length
    str += "<li><a href=" + content[hn][url] + " target='_blank'><nobr>"
		+ content[hn][caption].substr(0,40) + "</nobr></a><br>"
  }
  ITEMS.innerHTML = str
  TIME.innerHTML = now.toLocaleString()
  ccap=(ccap==0) ? content.length-1 : ccap-1
  cfunc=setTimeout("LinesdownClassic()",3000)
}
ccap=0
cword=0
cfunc='LinesdownClassic'
LinesdownClassic()
</script>

Среди кода DHTML, процедур JavaScript, апплетов Java, подключаемых модулей Flash и ссылок JavaScript существует множество приложений, которые можно добавлять на страницу Web - для выполнения действий, которые невозможно реализовать с помощью только кода XHTML. Найти их в Web с помощью этих ключевых слов достаточно просто.