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

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

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

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

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

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

При наличии адресов 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>

Многие имеющиеся в 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>