Апплеты 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>
Листинг 9.17. Общая форма тега <object> для апплета Java (html, txt)
Необходимо включить classid для апплета Java; настройки width и height (ширины и высоты) являются необязательными, но могут задаваться для изменения размера области вывода. Чтобы использовать апплет, он должен получить параметры, то есть, значения данных, которые модифицируют апплет в соответствии с существующими потребностями. Эти значения задаются с помощью последовательности тегов <param/>, число и тип которых зависит от назначения апплета. Тег <param/> имеет атрибуты name, для которых задаются атрибуты value, которые позволяют персонализировать апплет.
Необходимо закодировать параметр name="code"; его значением является имя файла класса апплета. Параметр name="codebase"; не требуется, если файл класса находится в том же каталоге, что и страница Web, на которой он находится. Иначе значением codebase будет путь доступа к каталогу класса апплета. Для конкретных апплетов могут потребоваться и другие параметры.
Примеры различных типов апплетов и требований к кодированию показаны ниже. Помните, что тег <object> является линейным тегом и должен находиться внутри блочного тега для соответствия XHTML. Блочные теги в следующих примерах не показаны.
Динамический HTML
Хотя это не было подчеркнуто в данном учебнике, но теги XHTML являются программируемыми объектами, которыми можно управлять с помощью процедур JavaScript. Это было продемонстрировано в предыдущих примерах, где обработчики событий добавлялись в теги <img/> и <marquee>, чтобы сделать их реагирующими на действия пользователей с мышью. Связывая процедуры JavaScript с этими и другими тегами, большинство элементов страницы можно сделать реагирующими на события мыши и клавиатуры. Обычно эти события вызывают немедленные изменения в настройках стиля, динамические изменения визуального представления страницы или изменение вывода информации в ответ на запросы пользователя. Такие действия по программированию тегов называют Dynamic HTML (DHTML).
Головоломка ниже является набором изображений GIF, которые запрограммированы для реагирования на события перетаскивания мыши. Фрагмент головоломки надо перетащить на область палитры, чтобы восстановить изображение.
Рис. 9.19. Использование динамического HTML (DHTML) для программирования тегов XHTML
С помощью языка JavaScript можно программировать теги XHTML для создания этих и других типов специальных эффектов на странице Web. Можно также осуществить поиск в Web уже готового кода DHTML, который можно скопировать на страницу Web и модифицировать в соответствии со своими целями. В Web можно найти приложения DHTML для создания меню и методов перемещения, прокрутки текста, визуальных эффектов и слайдшоу, календарей, часов, использования мыши, игр и многих других специальных эффектов. Часто использование этих приложений требует только копирования кода и сценариев с сайта Web и вставки в создаваемую страницу Web.
Доступ к потоковому видео
При наличии адресов URL внешних сайтов можно соединяться с контентом потокового видео. Как и для аудиофайлов URL можно получить из ссылки, если видео воспроизводится через Windows Media Player. Во время воспроизведения видео сделайте щелчок правой кнопкой мыши на экране и выберите "Properties" во всплывающем меню. Из окна "Properties" скопируйте полный адрес URL воспроизводимого потокового файла.
Следующее встроенное видео соединено по этой технологии. В этом случае URL указывает на фрагмент фильма, найденный в Web.
Рис. 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=1021057&segment=73208&s=1805540029&ru=embedded% 2Eyahoo%2Ecom&b=a3qgtq8vgc8s33f0b633c"/> <param name="autoStart" value="false"/> </object>
Листинг 9.13. Код встраивания потокового видеофайла (html, txt)
Многие имеющиеся в Web видеофайлы требуют плату за просмотр. Также часто встречаются видеоплееры, встроенные в страницы сайта с настройками, которые не позволяют получить доступ к окну Properties для получения URL. Надо быть просто терпеливым и настойчивым, чтобы найти видео, с которым можно соединиться. Кроме того, адреса URL постоянно изменяются, и позже может оказаться невозможно соединиться с видео в его исходном местоположении.
Поток живого видео можно захватить и воспроизвести с помощью Media Player. Следующий адрес URL соединения C-SPAIN был определен в окне Properties плеера во время живого вещания.
Рис. 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.asf&proto=mms?mswmext=.asx"/> <param name="autoStart" value="false"/> </object>
Листинг 9.14. Код встраивания живого видеопотока (html, txt)
Код для соединения
| <a href="PeopleWillCome.wav"><img src="PeopleWillCome.gif" alt="Kansas ballpark"/></a> <a href="PeopleWillCome.wav">PeopleWillCome.wav (426 KB)</a> |
| Листинг 9.1. Код для соединения с файлом аудио |
| Закрыть окно |
| <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> |
| Листинг 9.2. Общий формат тега <object> |
| Закрыть окно |
| <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="PeopleWillCome.wav"/> <param name="autoStart" value="false"/> </object> |
| Листинг 9.3. Код встраивания Media Player для воспроизведения аудиофайла |
| Закрыть окно |
| <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> |
| Листинг 9.4. Код для задания Media Player в режиме "mini" |
| Закрыть окно |
| <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="Start" style="font-size:8pt" onclick="Player.controls.stop()"/> |
| Листинг 9.5. Код программирования элементов управления 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()"/> |
| Листинг 9.6. Код программирования скрытого 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()"/> |
| Листинг 9.7. Код для воспроизведения нескольких звуковых файлов через один 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> |
| Листинг 9.8. Код воспроизведения фонового звука |
| Закрыть окно |
| <a href="Casablanca.wmv"><img src="Casablanca.gif" alt="Casablanca"/></a> <a href="Casablanca.wmv">Casablanca.wmv (484 KB)</a> |
| Листинг 9.9. Код соединения с видеофайлом |
| Закрыть окно |
| <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="Casablanca.wmv"/> <param name="autoStart" value="false"/> </object> |
| Листинг 9.10. Код встроенного 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="Start" style="font-size:8pt" onclick="Player.controls.stop()"/> |
| Листинг 9.11. Код программирования Media Player |
| Закрыть окно |
| <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> |
| Листинг 9.12. Код для оформления и программирования Media Player |
| Закрыть окно |
| <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="300"> <param name="URL" value="http://playlist.yahoo.com/makeplaylist.dll? id=1021057&segment=73208&s=1805540029&ru=embedded% 2Eyahoo%2Ecom&b=a3qgtq8vgc8s33f0b633c"/> <param name="autoStart" value="false"/> </object> |
| Листинг 9.13. Код встраивания потокового видеофайла |
| Закрыть окно |
| <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="http://play.rbn.com/play.asx?url= =cspan/cspan/wmlive/cspan1v.asf&proto=mms?mswmext=.asx"/> <param name="autoStart" value="false"/> </object> |
| Листинг 9.14. Код встраивания живого видеопотока |
| Закрыть окно |
| <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> |
| Листинг 9.15. Общий формат тега <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> |
| Листинг 9.16. Код для оформления marquee |
| Закрыть окно |
| <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="n" height="n"> <param name="code" value="file.class"/> <param name="codebase" value="path"/> ... </object> |
| Листинг 9.17. Общая форма тега <object> для апплета Java |
| Закрыть окно |
| <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> |
| Листинг 9.18. Код, применяющий апплет 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> |
| Листинг 9.19. Код, использующий апплет Java для прокрутки текста |
| Закрыть окно |
| <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="466" height="457"> <param name="codebase" value="Breakout/"/> <param name="code" value="breakout.class"/> </object> |
| Листинг 9.20. Код для выполнения игрового апплета 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> |
| Листинг 9.21. Код апплета Java тикера рынка |
| Закрыть окно |
| <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="330"> <param name="movie" value="EggGame.swf"/> </object> |
| Листинг 9.22. Код для встраивания приложения Flash |
| Закрыть окно |
| <script src='http://voap.weather.com/weather/oap/31206?template=GENXH&par=1002807763 &unit=0&key=4b85ab04049dg00730e07efd748e8055'> </script> |
| Листинг 9.23. Код для вывода информации о погоде |
| Закрыть окно |
| <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=js&id=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> |
| Листинг 9.24. Код для вывода заголовков новостей |
| Закрыть окно |
Фоновые звуки
Для некоторых страниц может быть нежелательно выводить на экране 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>
Листинг 9.8. Код воспроизведения фонового звука (html, txt)
Здесь, так как Player невидим, не имеет значения, где на странице кодируется этот тег <object>. Как только страница заканчивает загружаться, начинается загрузка и воспроизведение звука. Когда происходит переход к другой странице, то воспроизведение аудио останавливается.
Форматы аудио
Для воспроизведения в 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. Разработан для файлов потокового аудио. Очень хорошее качество для различных полос пропускания. Один из наиболее распространенных форматов |
Форматы аудио/видео
Одним из привлекательных результатов перехода к широкополосным соединениям Интернет является растущее использование звука и видео в качестве контента страниц Web. Высокоскоростные сетевые соединения способны передавать данные со скоростью несколько мегабайтов в секунду, что является ключевым условием доставки больших файлов аудио и видео на рабочий стол.
Форматы видео
Как и для форматов аудио, форматы файлов видео характеризуются типом компьютерной системы, для обслуживания которой они созданы, и предоставляемым качеством видео. Качество видео зависит также от кодека, используемого для оцифровки файла. Наиболее популярные форматы видео представлены в следующей таблице.
| AVI | Audio Video Interleave. Стандартный формат видео для Windows. Широко используется для загрузки файлов |
| MPEG | Moving Pictures Expert Group. Высокая степень сжатия и небольшие размеры файлов для воспроизведения аудио и видео |
| RV | Real Video. Патентованный формат для потокового видео в реальном времени. Создает файлы небольшого размера для соединений с узкой полосой пропускания |
| QuickTime | Разработан для компьютеров Apple Macintosh. Файлы имеют расширение .mov. Один из наиболее распространенных форматов для загрузки в Web. Требуется специальный плеер |
| WMV | Windows Media Video. Разработан для файлов потокового видео. Очень хорошее качество для различных полос пропускания. Один из наиболее широко используемых форматов |
Независимо от используемого формата соединение с файлами или доступ к потоковому источнику медиа производится одинаковым образом.
Функции JavaScript
Существуют тысячи готовых приложений JavaScript, которые можно скопировать из Web и вставить в создаваемую страницу. Следующий календарь и калькулятор были найдены на сайте http://javascript.internet.com/. Обычно все сценарии и соответствующий код XHTML копируют с сайта и сразу вставляют на страницу.
Рис. 9.20. Функции JavaScript, скопированные на страницу Web
Можно найти всевозможные календари, калькуляторы, часы, кнопки, форматтеры текста, генераторы меню, игры, таблицы для поиска, доски объявлений и другие приложения, слишком многочисленные, чтобы их можно было перечислить. Обычно не требуется понимать или модифицировать код, который помещается на страницу.
Игры
Игры с активным действием, аркадные игры, карточные игры, головоломки и другие типы игр доступны в виде апплетов. Версия игры Breakout показана ниже.
Рис. 9.23. Игровой апплет Java
Как и многие игры, эта игра требует дополнительных файлов, кроме основного файла класса. Графические и текстовые файлы поддержки часто поставляются упакованными вместе в архиве и распаковываются в папку, которая содержит все файлы, необходимые для выполнения приложения. Иногда в пакете поставляется страница 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>
Листинг 9.20. Код для выполнения игрового апплета Java (html, txt)
Игры с активным действием, аркадные игры, карточные игры, головоломки и другие типы игр доступны в виде апплетов. Версия игры Breakout показана ниже.
Рис. 9.23. Игровой апплет Java
Как и многие игры, эта игра требует дополнительных файлов, кроме основного файла класса. Графические и текстовые файлы поддержки часто поставляются упакованными вместе в архиве и распаковываются в папку, которая содержит все файлы, необходимые для выполнения приложения. Иногда в пакете поставляется страница 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>
Листинг 9.20. Код для выполнения игрового апплета Java
Исключенный тег <applet>
Тег <object>, используемый для встраивания апплетов Java на страницы Web, заменяет исключенный тег <applet>, общий формат которого показан ниже.
<applet code="file.class" codebase="path" width="n" height="n"></applet>
Параметр code задает имя файла класса; параметр codebase задает путь доступа к файлу класса, если он не находится в том же каталоге, что и страница Web. Могут потребоваться необязательные теги <param/>, в зависимости от конкретного приложения.
Исключенный тег embed
Media Player можно встраивать в страницу Web с помощью тега <embed/>, общий формат которого показан ниже.
<embed src="url" autostart="true|false"/>
Атрибут src является адресом URL файла. Свойство autostart указывает, должен ли файл немедленно начинать воспроизведение, когда открывается страница.
Использование технологии Flash
(Примечание: Прежде чем использовать приложения Flash, необходимо загрузить и установить с сайта http://www.macromedia.com плеер Flash Player.)
Многочисленные игры и приложения в формате Macromedia Flash доступны для загрузки и размещения на странице Web (http://www.flash-game.net/). Пример такой игры показан ниже.
Рис. 9.25. Flash-игра
Файлы Flash имеют расширение .swf. Они размещаются на странице Web с помощью тега <object>. Код для встраивания приведенной выше игры показан ниже.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="330"> <param name="movie" value="EggGame.swf"/> </object>
Листинг 9.22. Код для встраивания приложения Flash (html, txt)
Отметим, что classid отличается от того, который используется для Media Player или апплета Java. Этот classid предназначен для плеера Flash.
Единственным обязательным параметром является name="movie" со значением, задающим адрес URL файла .swf. Может понадобиться добавить в тег <object> значения ширины и высоты, чтобы задать размер изображения.
Манипуляции с текстом
Большое число апплетов выполняет различные манипуляции с текстом, позволяя украсить или анимировать слова и фразы. Следующий апплет, например, создает эффект радуги для задаваемой строки текста.
Рис. 9.21. Апплет Java для декорирования текста
Показанный выше апплет называется 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>
Листинг 9.18. Код, применяющий апплет Java для декорирования текста (html, txt)
Параметр name="code" задает имя файла класса апплета (RainbowText.class). В этом примере параметр name="codebase" не требуется, так как файл класса находится в том же каталоге, что и страница Web. Данный апплет имеет дополнительные параметры, определяющие характеристики строки текста, к которой применяется апплет. Документация апплетов обычно определяет необходимые параметры и диапазоны значений, которые они принимают.
Методы передачи
Существует два способа получения файлов аудио и видео в браузере. Один из них состоит в загрузке файла с сервера Web. В этом случае существует задержка, связанная с передачей файла в браузер, хотя современные браузеры могут начинать воспроизводить медиафайл, прежде чем он будет полностью получен, - с помощью методов постепенной (прогрессивной) загрузки. То, есть воспроизведение происходит в то же время, когда загружается файл. После окончания загрузки файла он будет доступен в ПК пользователя для быстрой перезагрузки и повторного воспроизведения. Загруженные файлы можно сохранить на компьютере и после этого обращаться к ним и воспроизводить локально.
Второй способ получения мультимедийного содержимого состоит в использовании потоковых методов. Если файлы аудио и видео находятся на "медиасервере", то этот компьютер может передавать файлы как непрерывный поток, не требующий ожидания окончания загрузки, прежде чем начнется воспроизведение. Обычно имеется несколько секунд задержки, пока на ПК передается начальное содержимое; после этого браузер получает непрерывный поток звука и изображений. Когда переданная часть файла воспроизводится, следующая часть потока передается и буферизуется (временно сохраняется) на ПК в ожидании воспроизведения. Такое чередование передачи и воспроизведения обеспечивает непрерывный поток мультимедийного содержания. Часто файлы медиа могут передаваться потоком со скоростью, которая соответствует полосе пропускания используемого соединения с Интернет. Потоковые файлы не загружаются; поэтому копия файла не будет получена.
Потоковые методы используются также для живого вещания. Существует задержка в несколько секунд для получения и буферизации на ПК начальной передачи. Пока продолжается воспроизведение буферизированного содержимого, передается следующая порция содержимого и буферизуется в ПК в ожидании воспроизведения. Способность компьютера воспроизводить буферизованное содержимое одновременно с получением и буферизацией передачи создает непрерывный поток аудио- и видеовывода.
Оформление плеера
С небольшими усилиями можно задать собственное оформление плеера, используя графические изображения для окружения экрана и карту ссылок для создания программных элементов управления. Один из таких способов показан ниже. Экран Player перекрывает изображение телевизионного экрана, снабженного изображениями кнопок запуска и остановки, сформатированными как карта ссылок. Сценарии связываются с картой ссылок для запуска и остановки Player.
Рис. 9.13. Оформленный Media 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>
Листинг 9.12. Код для оформления и программирования Media Player (html, txt)
При открытии страницы видеофайл загружается в Player, но не запускается автоматически. Его параметр uiMode задан как "none", так что сам Player скрыт; виден только экран. Размер экрана и его позиция заданы так, чтобы точно разместиться поверх графического изображения телевизора. Может понадобиться проверить для экрана различные размеры и позиции, чтобы точно попасть в правильное положение поверх изображения.
Вместо применения для управления Player кнопок к изображению телевизора добавлены изображения кнопок для запуска и остановки. Эти две круглые области определены на карте ссылок, чтобы сделать их реагирующими на щелчок мыши. В то время как карты ссылок используются обычно для задания ссылок на страницы с помощью атрибутов href для областей, в данном случае атрибут заменяется обработчиками события щелчка мыши, чтобы запустить и остановить Player.
Программирование плеера
При задании для параметра uiMode значения value="none", элементы управления плеера Media Player не выводятся. Выводится только экран. Это может быть подходящей настройкой, когда плеер запускается автоматически или если пользователь знает, что элементы управления доступны для запуска и остановки воспроизведения в "контекстном меню", выводимом при щелчке правой кнопкой мыши в окне плеера. Однако обычно стандартные элементы управления скрыты, потому что они будут запрограммированы самостоятельно.
Хотя это не учебник по программированию страниц Web, достаточно просто задать свои собственные управляющие кнопки для 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="Start" style="font-size:8pt" onclick="Player.controls.stop()"/>
Листинг 9.5. Код программирования элементов управления Media Player (html, txt)
Прежде всего, необходимо задать для 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.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()"/>
Листинг 9.6. Код программирования скрытого Media Player (html, txt)
Так как Media Player невидим, то не имеет значения, где на странице записывается тег <object>.
Если посмотреть внимательно, то можно заметить небольшую точку в нижнем левом углу кнопки "Start". Это Media Player, редуцированный до одной точки, при задании его ширины и высоты равными 0 пикселей. Если желательно полностью исключить точку, включите таблицу стилей для Player с width:0px и height:0px.
При задании для параметра uiMode значения value="none", элементы управления плеера Media Player не выводятся. Выводится только экран. Это может быть подходящей настройкой, когда плеер запускается автоматически или если пользователь знает, что элементы управления доступны для запуска и остановки воспроизведения в "контекстном меню", выводимом при щелчке правой кнопкой мыши в окне плеера. Однако обычно стандартные элементы управления скрыты, потому что они будут запрограммированы самостоятельно.
Хотя это не учебник по программированию страниц Web, достаточно просто задать свои собственные управляющие кнопки для 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="Start" style="font-size:8pt" onclick="Player.controls.stop()"/>
Листинг 9.5. Код программирования элементов управления Media Player
Прежде всего, необходимо задать для 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.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()"/>
Листинг 9.6. Код программирования скрытого Media Player
Так как Media Player невидим, то не имеет значения, где на странице записывается тег <object>.
Если посмотреть внимательно, то можно заметить небольшую точку в нижнем левом углу кнопки "Start". Это Media Player, редуцированный до одной точки, при задании его ширины и высоты равными 0 пикселей. Если желательно полностью исключить точку, включите таблицу стилей для Player с width:0px и height:0px.
Такое же программирование, как и в случае аудиофайлов, применимо к видеофайлам. Стандартную панель управления можно удалить из Media Player и заменить программируемыми кнопками. Следующий код и кнопки скрывают вывод Media Player и окружают экран стилизованной рамкой для размещения плеера внутри оформленного тега <div>. Добавлены также кнопки для запуска и остановки плеера.
Рис. 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="Start" style="font-size:8pt" onclick="Player.controls.stop()"/>
Листинг 9.11. Код программирования Media Player
Прокрутка текста
Другие популярные апплеты выполняют прокрутку текста, и многие из них применяют методы, которые невозможно реализовать с помощью тега XHTML <marquee>. Например, апплет с именем Terminal.class, загруженный с того же сайта, создает показанный ниже вывод. Этот апплет прокрутки использует для представления режим пишущей машинки. Файл класса апплета находится в том же каталоге, что и страница Web.
Рис. 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>
Листинг 9.19. Код, использующий апплет Java для прокрутки текста (html, txt)
Этот апплет требует использования тегов <param/> для каждых (до) десяти строк текста. Одна пара тегов задает текстовую строку для вывода; другая задает число секунд паузы после вывода строки. Атрибуты width и height задают размеры области вывода.
Соединение и встраивание видеофайлов
Для загрузки видеофайла создается ссылка <a> с адресом URL этого файла. Файл загружается и открывается во внешнем Media Player таким же образом, как аудиофайлы.
Следующая ссылка соединяется с видеофайлом формата WMV, находящимся в том же каталоге, что и страница Web. При щелчке на ссылке файл открывается во внешнем Media Player.
Точное поведение Media Player зависит от его конфигурации.
Рис. 9.10. Ссылки для воспроизведения видеофайла
<a href="Casablanca.wmv"><img src="Casablanca.gif" alt="Casablanca"/></a> <a href="Casablanca.wmv">Casablanca.wmv (484 KB)</a>
Листинг 9.9. Код соединения с видеофайлом (html, txt)
Видеофайл можно встраивать в страницу Web с помощью тега <object>.
Рис. 9.11. Встроенный Media Player для воспроизведения видеофайла
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="Casablanca.wmv"/> <param name="autoStart" value="false"/> </object>
Листинг 9.10. Код встроенного Media Player для воспроизведения видеофайла (html, txt)
Соединение с файлами аудио
Файл аудио делается доступным для загрузки и воспроизведения при размещении его в каталоге Web. Доступ к файлу осуществляется через простую ссылку с помощью тега <a>, кодируемого с относительным адресом URL файла. При щелчке на ссылке файл открывается на компьютере клиента во внешнем Media Player. Плеер осуществляет прогрессивную загрузку, так что пользователю не нужно ждать загрузки всего файла, прежде чем начинается воспроизведение. После загрузки файла он становится доступным на ПК пользователя, и его можно повторно воспроизвести локально.
Например, следующие графическая и текстовая ссылки соединяются с файлом аудио формата WAV, находящегося в том же каталоге, что и страница Web. Щелчок на ссылке открывает внешний Media Player для загрузки и воспроизведения. Внешний вид Media Player на компьютере зависит от его конфигурации.
Рис. 9.3. Ссылки для воспроизведения файла аудио
Приведенные выше ссылки кодируются, как показано ниже. Атрибут 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>
Листинг 9.1. Код для соединения с файлом аудио (html, txt)
Соединение с сайтами с помощью JavaScript
Другой метод встраивания приложения в страницу использует код JavaScript для соединения с сайтами, на которых выполняется приложение. Другими словами, приложение не загружается, оно соединяется и выполняется с удаленного сайта.
Weather Channel (http://www.weather.com), например, позволяет соединяться с локальным прогнозом погоды с помощью небольшого сценария, который создает вывод прогноза погоды на странице.
Рис. 9.26. Текущая погода от Weather Channel
<script src='http://voap.weather.com/weather/oap/31206?template=GENXH&par=1002807763 &unit=0&key=4b85ab04049dg00730e07efd748e8055'> </script>
Листинг 9.23. Код для вывода информации о погоде (html, txt)
Код предоставляется сайтом, предлагающим услугу, и его можно просто скопировать на страницу. Для получения прогноза погоды необходимо бесплатно зарегистрироваться на сайте Weather Channel и выбрать область прогноза. Отметим, что приведенный выше регистрационный код не является действительным, а служит просто примером кода, полученного после регистрации.
Другим примером соединения с помощью JavaScript является следующий информер заголовков новостей. Щелчок на выводимых ссылках вызывает переход к исходному источнику новостей.
Рис. 9.27. Заголовки текущих новостей
Это приложение с сайта www.news4sites.com, который поддерживает службу предоставления регулярно обновляемых заголовков новостей из различных информационных источников по всему миру. Это приложение бесплатно, потому что включает рекламные ссылки на сайты; платная подписка удаляет рекламу.
Код JavaScript и соответствующий XHTML предоставляются сайтом и копируются на страницу. Не требуется даже знать, что все это означает.
Листинг 9.24. Код для вывода заголовков новостей (html, txt)
Среди кода DHTML, процедур JavaScript, апплетов Java, подключаемых модулей Flash и ссылок JavaScript существует множество приложений, которые можно добавлять на страницу Web - для выполнения действий, которые невозможно реализовать с помощью только кода XHTML. Найти их в Web с помощью этих ключевых слов достаточно просто.
Специальные эффекты
Кроме воспроизведения аудио- и видеофайлов, существуют другие способы создания специальных визуальных эффектов на странице Web и присоединения к внешним источникам информации для контента страницы. Существуют, например, некоторые теги XHTML, которые могут прокручивать текст; другие источники информационного содержимого можно встраивать в страницу или присоединять с удаленных сайтов с помощью специальных сценариев, написанных на языке JavaScript.
Ссылки на медиафайлы
С файлами медиа можно соединяться точно так же, как делают соединение со страницами Web, - с помощью тега <a>. В этом случае атрибут href задает адрес URL файла, расположенный либо локально на ПК, либо удаленно на сервере Web. При соединении с файлом медиа Media Player открывается вне браузера, позволяя продолжить просмотр страниц Web во время воспроизведения медиа.
Рис. 9.1. Открытие Media Player вне окна браузера
Тег <marquee>
(Примечание: Тег marquee не считается допустимым элементом согласно стандартам XHTML 1.1. Он представлен здесь в связи с его сохраняющейся популярностью и поддержкой в браузерах. Страницы Web с прологом XHTML 1.1 будут выполняться правильно, даже хотя они и не будут полностью проходить проверку на правильность.)
Тег <marquee> применяется для автоматической прокрутки текста на экране. Текст можно прокручивать влево, вправо, вверх или вниз в определяемой области прокрутки. Он может использовать шрифт с любыми характеристиками. Следующий тег marquee имеет связанные с ним кнопки, чтобы можно было видеть направления прокрутки. Можно сделать паузу в прокрутке, помещая курсор над областью marquee.
Рис. 9.16. Использование тега <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>
Листинг 9.15. Общий формат тега <marquee> (html, txt)
В своей простейшей форме тег может использовать все значения по умолчанию для создания прокручивающегося текста, показанного ниже:
<marquee>Text to Scroll</marquee>
Рис. 9.17. Тег <marquee> по умолчанию
Прокручивающийся текст появляется между открывающим и закрывающим тегами <marquee>. Он двигается влево через всю страницу (или внутри горизонтальных размеров контейнерного тега, содержащего marquee) и изменяет свое положение на 6 пикселей каждые 85 миллисекунд. Он занимает на экране вертикальное пространство, соответствующее размеру букв.
Направление прокрутки можно задавать с помощью атрибута direction. Если определено up (вверх) или down (вниз) и если height (высота) для тега <marquee> не задана, используется значение height по умолчанию, равное примерно 200 пикселей, задающее вертикальную область прокрутки. Marquee в начале этой страницы расширяется по высоте в направлении прокрутки вниз или вверх, так как высота не была определена.
Скорость движения управляется атрибутами scrollamount и scrolldelay. Надо проверить несколько значений настройки этих атрибутов, чтобы создать требуемый эффект прокрутки.
Скорее всего, потребуется некоторое дополнительное оформление прокручивающегося текста. Это можно сделать с помощью свойств стиля, связанных с тегом <marquee>. Кодирование следующего 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>
Листинг 9.16. Код для оформления marquee (html, txt)
marquee помещается внутри раздела (div), чтобы выровнять его по центру и задать цвет фона, на котором выводится текст. Для marquee задана граница и определен размер в 50% ширины страницы с заданным цветом текста и фона.
Обычно желательно, чтобы пользователи могли делать паузу при прокрутке текста и, тем самым, имели возможность его спокойно прочитать. Это легко сделать, добавляя операторы JavaScript в тег <marquee>. Операторы сценария останавливают прокрутку по событию "указатель мыши над" (свойство scrollAmount задается равным 0) и возобновляют прокрутку по событию "указатель мыши вне" (свойству scrollAmount задается его исходное значение).
Тикеры
Некоторые апплеты соединяются со службами данных, для предоставления самых свежих новостей, финансовых отчетов, прогноза погоды и других изменяющихся данных. Следующий апплет является примером тикера рынка акций с сайта www.redinews.com. Эта служба, работающая по подписке и требующая определенной платы за доступ к биржевой информации. Тег <object> этого приложения показан ниже.
Рис. 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>
Листинг 9.21. Код апплета Java тикера рынка (html, txt)
Воспроизведение аудио
Файлы аудио можно загружать из Web для локального воспроизведения. Файлы аудио в форматах MPEG и WAV являются наиболее распространенными типами для загрузки. Файлы аудио можно также использовать для потоковой трансляции с компьютера медиасервера. Это может осуществляться в форме широковещания или оцифрованных файлов для получения по запросу. Формат WMA является популярным форматом Windows для потокового аудио.
Воспроизведение медиа
Чтобы получать аудио- и видеофайлы и живой поток медиа, необходимо иметь на компьютере установленный медиаплеер. При использовании Windows XP в этой операционной системе имеется устанавливаемый по умолчанию Windows Media Player. Другими популярными плеерами являются QuickTime Player компании Apple и RealPlayer компании RealNetwork. Требуемый плеер зависит от форматов, в которых предоставляется содержимое медиа.
Следующие разделы описывают использование Media Player. Необходимо установить самую последнюю версию этой программы. При использовании Windows Media Player имеется два способа предоставления доступа Web к файлам медиа. Можно создавать ссылки на файлы или встраивать медиа в страницу Web.
Воспроизведение нескольких звуков
После небольшой модификации сценария можно воспроизводить несколько звуков с помощью одного и того же Media Player. В следующем примере проигрываются голоса четырех различных животных при щелчке на четырех отдельных тегах <img/>. Тег <object> скрывает Media Player и не задает никаких тегов <param>. Поэтому никакой файл для воспроизведения не задается; только невидимый плеер встроен в страницу.
Рис. 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()"/>
Листинг 9.7. Код для воспроизведения нескольких звуковых файлов через один Media Player (html, txt)
В обработчиках событий требуется пара операторов JavaScript. Первый оператор присваивает звуковой файл свойству URL плеера: Player.URL='filename.wav'; второй оператор запускает его воспроизведение: Player.controls.play(). Не нужно кодировать сценарий stop(), так как звуки будут очень короткими.
Отметим, что весь сценарий обработчика событий заключен в двойные кавычки, что имя звукового файла заключено в одиночные кавычки и что два оператора разделены точкой с запятой.
Даже человек, незнакомый с языком JavaScript, сможет модифицировать и включить этот сценарий в любой тег, который будет использоваться для загрузки и воспроизведения звуковых файлов встроенным плеером Media Player.
Воспроизведение видео
Нет существенных различий между вызовом и воспроизведением файлов видео по сравнению с файлами аудио. Файлы видео можно загружать из Web для локального воспроизведения. Файлы в форматах AVI и MPG являются наиболее распространенными типами файлов для загрузки. Видео файлы в формате WMA могут передаваться в потоковом режиме с медиасервера. Это может быть живая трансляция или оцифрованные файлы для получения по запросу.
Встраивание файлов аудио
Встраивание 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>
Листинг 9.2. Общий формат тега <object> (html, txt)
Тег <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.4. Встроенный Media Player для воспроизведения аудио файла
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="PeopleWillCome.wav"/> <param name="autoStart" value="false"/> </object>
Листинг 9.3. Код встраивания Media Player для воспроизведения аудиофайла (html, txt)
Тег <object> имеет набор параметров запуска (param) для Player. Необходимо задать параметр name="URL" и определить расположение value="url" аудиофайла. Будет или нет файл воспроизводиться немедленно после загрузки страницы, задается в параметре name="autoStart". Значение этого параметра по умолчанию value="true"; задание value="false" требует, чтобы пользователь инициировал воспроизведение, нажимая кнопку "Play" на панели управления. Если видеоэкран выводить не требуется, можно включить значение height="45"; в этом случае будут выводиться только элементы управления.
Рис. 9.5. Встроенный Media Player, выводящий только элементы управления
Параметр name="uiMode" тега <object> позволяет задать вывод характеристик встроенного плеера. Его значение по умолчанию value="full" создает полный экран вывода и полный набор элементов управления. Со значением value="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>
Листинг 9.4. Код для задания Media Player в режиме "mini" (html, txt)
Встроенный медиафайл
Media Player можно встроить в страницу Web, а не открывать его в отдельном окне. В этом случае плеер является элементом страницы, позволяющим осуществить тесную интеграцию звука и изображений с другим содержимым страницы. При встроенном плеере медиа воспроизводится только во время просмотра страницы и останавливается, когда происходит обращение к другой странице.
Рис. 9.2. Открытие Media Player на странице Web
Способ, которым предоставляется доступ к файлам медиа, зависит в большой степени от возможностей клиентов Web. Для браузеров с более медленными соединениями с Интернет предоставление ссылок на файлы медиа вместе с соответствующей информацией о размерах файлов дает пользователю возможность выбора в отношении продолжения загрузки. Встроенный плеер, заданный для автоматического воспроизведения, может создавать длительные задержки и вызывать недовольство пользователей.
Для клиентов Web c широкополосными соединениями имеется возможность в большей степени использовать варианты дизайна страницы. Если предполагается продолжение просмотра сайта с фоновым или внешним воспроизведением, то можно предоставить ссылки на файлы медиа. С другой стороны, если воспроизведение является существенным для другого содержимого страницы, то медиафайл, скорее всего, должен быть встроен и при открытии страницы запускаться на воспроизведение.
