Основы работы с XHTML и CSS
Оформление плеера
С небольшими усилиями можно задать собственное оформление плеера, используя графические изображения для окружения экрана и карту ссылок для создания программных элементов управления. Один из таких способов показан ниже. Экран 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.
