заметки АЙтишника

Столкнулся на днях с задачей: на странице вставлен с помощью EMBED (OBJECT на случай с IE) Windows Media Player Plugin (type="application/x-ms-wmp"). С помощью этого плагина я собираюсь проигрывать радио каналы.
Единственная неприятность используемого плагина – это необходимость установки его для Opera и FireFox. Если у вас просит плагин, его необходимо установить, кликнув на уведомление. Но есть и плюс – с IE данный плагин идёт из коробки. А это означает, что народ с ограниченными правами может без всяких установок слушать или смотреть видео с вашего сайта.
Внешний вид Windows Media Player меня немного не устраивал, поэтому пришлось его спрятать, и все элементы продублировать на страничке. Также на перспективу собираюсь использовать другие плееры, и необходимость в унификации интерфейса стоит остро.

Задача стоит в том, как заставить плеер показывать состояние воспроизведения – то, что плеер делает с потоком в данный момент, буферизирует поток, соединяется с сервером, либо воспроизводит тишину. Иначе если какой либо поток соединяется долго либо вообще не соединяется, пользователь это должен как-то видеть. А то подумает, что мой интерфейс не работает из за долгой паузы и тишины, которой никак не избежать при плохой скорости канала у клиента или высокого битрейта потока.

Мне удалось найти решение для всех браузеров, правда для IE отдельно.

Вообще состояние плеера можно достать через Свойство PlayState (playState property). Данное свойство только для чтения. Но меня не радовала идея, в цикле читать это свойство и выдавать на интерфейс состояния плеера. Я вообще против любых циклов.

Поэтому я пошел дальше и начал копать в сторону Событий. Ведь логично, что плеер сам каким-то образом шлёт мне в случае смены состояния - событие, и дальше я мог бы проверять указанное свойство. В итоге вот к чему я пришел...

У меня есть вот такой object с embed в нутрии:

<div id="status"></div><br />
 
<object id="wmplayer" width="300px" height="100px"
classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6, 4, 5, 715"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-ms-wmp">
<param name="filename" value="http://scfire-ntc-aa01.stream.aol.com:80/stream/1054"></param>
<param name="url" value="http://scfire-ntc-aa01.stream.aol.com:80/stream/1054"/>
<param name="AutoStart" value="false"/>
<param name="uiMode" value="mini"/>
<param name="AllowChangeDisplaySize" value="false"/>
<param name="AutoSize" value="false"/>
<param name="ShowDisplay" value="true">
<param name="showPositionControls" value="false"/>
<param name="showTracker" value="false"/>
<param name="showStatusBar" value="false"/>
<param name="fullScreen" value="false"/>
<param name="ShowControls" value="true"/>
<param name="stretchToFit" value="false"/>
<param name="enablecontextmenu" value="false"/>
<param name="<b>SendPlayStateChangeEvents</b>" value="true"/>
 
<embed id="wmplayer_embed"
width="300px"
height="100px"
type="application/x-ms-wmp"
url="http://scfire-ntc-aa01.stream.aol.com:80/stream/1054"
src="http://scfire-ntc-aa01.stream.aol.com:80/stream/1054"
autostart="false"
uimode="mini"
allowchangedisplaysize="false"
autosize="true"
showdisplay="true"
showpositioncontrols="false"
showtracker="false"
showstatusbar="true"
fullscreen="false"
showcontrols="true"
enablecontextmenu="false"
stretchtofit="true"
enablefullscreencontrols="true"
<b>sendplaystatechangeevents</b>="true"
></embed>
 
</object>

Обратите внимание, я везде, и в object и в embed добавил параметр SendPlayStateChangeEvents, который указывает плееру о необходимости отсылки нам события о изменении состояния воспроизведения, а также и сам статус. Блок div с id="status" с самого начала я буду использовать для вывода состояния.

Т.к. Internet Explorer использует только object, сразу же за кодом object вставка на JavaScript, которая выглядит следующим образом:

<script type="text/javascript" language="JavaScript">
var WMP=new Object();
WMP=document.getElementById("wmplayer");
WMP.attachEvent("playStateChange",send_status);
 
function send_status()
{
	view_status(WMP.playstate);
}
 
function view_status(status)
{
    document.getElementById("status").innerHTML = "Status: "+WMState[status]+" id: "+status;
}
</script>

Здесь мы с помощью attachEvent указываем плееру, какую функцию необходимо использовать при смене статуса. В функции send_status вызывается функция view_status для вывода статуса. В качестве параметра используется WMP.playstate, который содержит ID текущего статуса. Все идентификаторы перечислены в массиве WMState:

<script type="text/javascript" language="JavaScript">
var WMState = new Array();
WMState[0] = "Undefined";
WMState[1] = "Stopped";
WMState[2] = "Paused";
WMState[3] = "Playing";
WMState[4] = "Scan Forward";
WMState[5] = "Scan Reverse";
WMState[6] = "Buffering";
WMState[7] = "Waiting";
WMState[8] = "Media Ended";
WMState[9] = "Transitioning";
WMState[10] = "Ready";
WMState[11] = "Reconnecting";
</script>

Но данный код работает только с Object, а что же делать с embed. Ну а тут всё просто…

Для того, чтобы статус можно было отслеживать в FireFox, Opera и других браузерах, использующих embed, нам необходимо добавить функцию OnDSPlayStateChangeEvt(NewState), которая вызывается плеером в случае смены состояния и в качестве параметра принимает ID статуса:

<script type="text/javascript" language="JavaScript">
function OnDSPlayStateChangeEvt(NewState)
{
    view_status(NewState);
}
</script>

Ну таким образом у меня всё работает – ниже пример вывода статуса (интерфейс плагина виден, т.к. интерфейс переносить некогда :) ).

Название радио: #MUSIK.JAM - WWW.RAUTEMUSIK.FM - 24H HIPHOP RNB RAP SOUL REGGAE DANCEHALL URBAN AND MORE!

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