Windows Media Player Control v ASP.NET

7. října 2003

•

V tomto článku vytvoříme užitečný serverový ovládací prvek pro snadné zobrazení videa, přehrání zvukového souboru, playlistu nebo programu internetového rádia ve stránce. V článku si také ukážeme, jak použít pro nastavování vlastností typ výčet (enum).

Příprava serverového ovládacího prvku vychází ze stejného principu, jaký byl použit pro Flash Player Control. Jako základ budoucího serverového ovládacího prvku nám tedy poslouží výchozí „kostra“, do které „vpašujeme“ kód přehrávače záznamů. Získáme tak možnost snadno přehrávat média v libovolné ASP.NET aplikaci. Prohlédněte si ukázku, která přehraje záznam ze serveru MeteleskuBlesku.cz (zdrojové soubory).

Náš ovládací prvek má mnoho vlastností (vycházejí z vlastností pluginu přehrávače v prohlížeči), navíc renderujeme jakoby přehrávače dva – jeden pomocí značky Object a druhý pomocí vnořeného Embed. K jejich vlastnostem ještě přidáme vlastnost, kterou určíme, zda se v prohlížečích, které nejsou schopny přehrávač zobrazit, zobrazí alespoň alternativní odkaz na médium. Vlastností, která najednou sdružuje nastavení více vlastností zároveň, zde ukazujeme, že můžeme snadno dát k dispozici i doplňkové vlastnosti, které sice nepřinášejí nic nového, ale zmenší v určitých případech „ukecanost“ naší aplikace při nastavování vlastností ovládacího prvku.

V našem příkladu jsme tak vytvořili vlastnost AudioOnly, která automaticky nastaví rozměr přehrávače tak, aby byly právě viditelné prvky pro ovládání přehrávače a nezobrazovala se zbytečně část pro zobrazení videa. Pokud chceme přehrávač použít pouze pro zvukové záznamy, nemusíme nastavovat rozměry ani další prvky – pouze nastavíme tuto jedinou vlastnost. Onu poněkud úmornou práci při definici vlastností a následně testování, které uživatel zadal a ke kterým je třeba vyrenderovat patřičné atributy nebo elementy, jsem odvedl za vás, takže si můžete prohlédnout výsledek.

Plugin přehrávače má mnoho vlastností. Některé vlastnosti budou vyžadovat konverzi typu. Vlastnost Rate, kterou nadefinujeme jako typ Decimal, musíme ještě ošetřit zaokrouhlením (Round) na dvě desetinná místa, obdobně je potřeba provést konverzi typu Color pro nastavování barvy okraje videa. Ukážeme si, jakým způsobem budeme nastavovat vlastnosti, které mají ve skutečnosti tři stavy – true, false, nezadáno. Zde je výsek třídy Player s definicemi privátních proměnných, jejich veřejných protějšků, definicí výčtového typu enableStatus a část metody Render, kde rozhodujeme, zda uživatel prvku vlastnost nastavil. Části, které jsou analogické a opakovaly by se, jsem vynechal – kompletně je můžete vidět v ukázce zdroje nebo souboru ke stažení. V rozsáhlém kódu vidíme práci se všemi typy, které náš prvek používá – String, Unit, Bool, Int, Decimal, enum a Color.

public enum enableStatus
{
Disabled,Enabled,None
}
private Unit width,height;
private Color videobordercolor;
private bool alternatelink = false;
private string mediaurl,standby,alternatelinktext;
private string balance, displaysize, bufferingtime, playcount, selectionend, selectionstart, videoborderwidth, volume, rate;
private enableStatus audioonly = enableStatus.None;
private enableStatus allowchangedisplaysize = enableStatus.None;
private enableStatus autosize = enableStatus.None;
private enableStatus autorewind = enableStatus.None;
private enableStatus autostart = enableStatus.None;
private enableStatus animationatstart = enableStatus.None;
private enableStatus clicktoplay = enableStatus.None;
private enableStatus enablecontextmenu = enableStatus.None;
private enableStatus enablefullscreencontrols = enableStatus.None;
private enableStatus enabletracker = enableStatus.None;
private enableStatus loop = enableStatus.None;
private enableStatus mute = enableStatus.None;
private enableStatus showcontrols = enableStatus.None;
private enableStatus showaudiocontrols = enableStatus.None;
private enableStatus showdisplay = enableStatus.None;
private enableStatus showgotobar = enableStatus.None;
private enableStatus showpositioncontrols = enableStatus.None;
private enableStatus showstatusbar = enableStatus.None;
private enableStatus showtracker = enableStatus.None;
private enableStatus transparentatstart = enableStatus.None;
public Unit Width
{
get { return width; }
set { width = value; }
}
public bool AlternateLink
{
get { return alternatelink; }
set { alternatelink = value; }
}
public string MediaUrl
{
get { return mediaurl; }
set { mediaurl = value; }
}
public enableStatus AudioOnly
{
get { return audioonly; }
set { audioonly=value; }
}
public enableStatus AllowChangeDisplaySize
{
get { return allowchangedisplaysize; }
set { allowchangedisplaysize=value; }
}
public int Balance
{
get { return Int16.Parse(balance); }
set { balance = value.ToString(); }
}
public Decimal Rate
{
get { return Decimal.Parse(rate); }
set { rate = Decimal.Round(value,2).ToString(); }
}
[Bindable(true),Category(„Appearance“),DefaultValue(„Beige“)]
public Color VideoBorderColor
{
get { return videobordercolor; }
set { videobordercolor = value; }
}
.
.
protected override void Render (HtmlTextWriter writer)
{
StringBuilder getStyle = new StringBuilder(String.Empty);
if (audioonly==enableStatus.None || audioonly==enableStatus.Disabled)
{
    if (!width.IsEmpty)
      getStyle.Append(„width:“+width+“;“);
    if (!height.IsEmpty)
      getStyle.Append(„height:“+height+“;“);
}
else
{
    int pHeight = 0;
    if (showstatusbar == enableStatus.Enabled)
      pHeight = pHeight + 24;
    if (showcontrols != enableStatus.Disabled)
    {
      pHeight = pHeight + 29;
      if (showtracker != enableStatus.Disabled)
        pHeight = pHeight + 16;
    }
    getStyle.Append(„width:320px;height:“+pHeight.ToString()+“px;“);
}
getStyle.Append(„border:0px;margin:0px;padding:0px“);
string style = getStyle.ToString();
.
.
.
if (mediaurl != null)
{
writer.WriteBeginTag(„param“);
writer.WriteAttribute(„name“,“filename“);
writer.WriteAttribute(„value“,mediaurl);
writer.WriteAttribute(„valuetype“,“ref“);
writer.WriteAttribute(„type“,“video/*“);
writer.WriteLine(HtmlTextWriter.SelfClosingTagEnd);
}
if (allowchangedisplaysize!=enableStatus.None)
{
writer.WriteBeginTag(„param“);
writer.WriteAttribute(„name“,“allowchangedisplaysize“);
writer.WriteAttribute(„value“,((int) allowchangedisplaysize).ToString());
writer.Write(HtmlTextWriter.SelfClosingTagEnd);
writer.WriteLine();
}
.
.
.
if (volume != null)
{
writer.WriteBeginTag(„param“);
writer.WriteAttribute(„name“,“volume“);
writer.WriteAttribute(„value“, volume);
writer.Write(HtmlTextWriter.SelfClosingTagEnd);
writer.WriteLine();
}
.
.
.
if (!videobordercolor.IsEmpty)
{
writer.WriteBeginTag(„param“);
writer.WriteAttribute(„name“,“videobordercolor“);
writer.WriteAttribute(„value“, videobordercolor.ToString());
writer.Write(HtmlTextWriter.SelfClosingTagEnd);
writer.WriteLine();
}
.
.
.
if (alternatelink)
{
writer.WriteLine();
writer.WriteFullBeginTag(„noembed“);
writer.WriteLine();
writer.Indent++;
writer.WriteBeginTag(„a“);
writer.WriteAttribute(„href“,mediaurl);
writer.Write(HtmlTextWriter.TagRightChar);
if (alternatelinktext != null)
    writer.Write(alternatelinktext);
else
    writer.Write(mediaurl);
writer.WriteEndTag(„a“);
writer.Indent–;
writer.WriteLine();
writer.WriteEndTag(„noembed“);
}

V předcházejícím kódu jde opravdu jen o výseky nejpodstatnějších částí, ukazujících, jak se pracuje s jednotlivými vlastnostmi, jak se provádí testování jejich nastavení, konverze. Důležité je použití výčtu (enum) enableStatus, kterým pak můžeme definovat tři stavy – zapnuto, vypnuto, neurčeno (Enabled, Disabled, None). Výčet musí být definován jako public, aby bylo možné s ním pracovat i vně třídy. Takto může uživatel prvku přesně určit, zda se má vlastnost pluginu vůbec nastavit. Pokud bychom použili prostě typ bool, uživatel by vždy musel nějakou hodnotu nastavit, resp. neměl by možnost se vrátit k nedefinovanému stavu, tedy stavu, jaký má plugin v jeho prohlížeči předvolen coby výchozí. Pravda je, že náš ovládací prvek toho moc neumí a takříkajíc za běhu jej příliš ovládat nelze, nicméně není nemožné dopsat si třeba obsluhy přehrávače JScriptem – pak programátorsky čisté nastavování pomocí tří stavů a také zpřístupnění vlastností prvku i pro čtení má neoddiskutovatelný důvod. (U různých typů vidíme také mírně odlišné způsoby testování, zda hodnota byla uživatelem nastavena. Například u typu Color testujeme vlastnost IsEmpty.)

Na počátku metody Render vidíme StringBuilder, pomocí kterého nachystáme řetězec udávající styl zobrazení přehrávače, zejména šířku a výšku. V této části dochází k ověření, zda byla nastavena vlastnost AudioOnly – pokud ano, nastavení šířky a výšky se ignoruje, jen se dopočítá výška odpovídající zobrazovaným částem přehrávače tak, aby nebyla vidět část pro zobrazování videa. Podle toho, zda chceme zobrazovat stavový řádek, posuvník, nebo lištu nástrojů, přidáváme patřičný počet pixelů výšky. Šířka je v tomto případě nastavena vždy na 320 pixelů (kompromisní hodnoty jsem zjistil empiricky při zobrazení v různých prohlížečích). Dále vidíme práci s vlastnostmi různých typů, na konci je potom vidět část, která zajistí vyrenderování části Noembed, pokud je nastavena vlastnost AlternateLink=true. Pro detailnější pochopení odkazuji na články zmiňované v úvodu.

Ukažme si stránku, která bude fungovat jako jednoduchý audio přehrávač. Aplikace převezme cestu k médiu a vyrenderuje kompletní HTML stránku s vloženým přehrávačem.

<%@Page Language=“C#“ EnableViewState=“False“ EnableSessionState=“False“ Trace=“False“ Debug=“False“ %>
<%@OutputCache Duration=“3600″ VaryByParam=“*“ %>
<%@ Register TagPrefix=“mycode“ Namespace=“Windows.Media“ Assembly=“ControlWindowsMediaPlayer“ %>
<script runat=“server“>
void Page_Load (Object sender, EventArgs e)
{
string mediaurl = Request.QueryString[„MediaUrl“];
if (mediaurl != null)
    if (mediaurl.Length != 0)
    {
      WMPControl.MediaUrl = mediaurl;
      WMPControl.Visible = true;
      lblError.Visible = false;
    }
}
</script><?xml version=“1.0″ encoding=“utf-8″ ?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs-CZ“ lang=“cs-CZ“ dir=“ltr“>
<head>
    <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
    <meta http-equiv=“Imagetoolbar“ content=“no“ />
    <meta http-equiv=“MSThemeCompatible“ content=“no“ />
    <meta name=“MSSmartTagsPreventParsing“ content=“true“ />
    <title>Windows Media Player</title>
</head>
<body style=“background: #999999;overflow:auto;height:100%“>
    <h1>Přehrávač záznamů</h1>
    <div>
      <mycode:Player Id=“WMPControl“ Visible=“False“ ShowControls=“Enabled“ ShowStatusBar=“Enabled“ EnableTracker=“Enabled“ ShowTracker=“Enabled“ AutoRewind=“Enabled“ Loop=“Enabled“ AutoStart=“Enabled“ AudioOnly=“Enabled“ AllowChangeDisplaySize=“Disabled“ AlternateLink=“True“ AlternateLinkText=“Stáhnout“ Standby=“Vyčkejte prosím, nahrávají se součásti Windows Media…“ RunAt=“server“ />
      <asp:Label Id=“lblError“ Visible=“True“ Text=“Nebylo zadáno médium pro přehrávání…“ RunAt=“server“ />
    </div>
</body>
</html>

Ve stránce je vidět zaregistrování ovládacího prvku a nastavení cachování. Hodnota z QueryStringu je otestována, a pokud je zadána, nastavíme ji jako vlastnost našeho ovládacího prvku MediaUrl. Současně s tím také zviditelníme ovládací prvek přehrávače a zneviditelníme Label obsahující hlášení o chybě. Výchozí hodnota prvku přehrávače je false a je změněna ve skriptu právě jen tehdy, pokud má MediaUrl nějakou hodnotu. Není-li cesta nastavena, ovládací prvek se nebude vůbec renderovat, namísto něj bude zobrazeno chybové hlášení.

Následující seznam přehledně shrnuje, které vlastnosti vůbec našemu prvku můžeme nastavovat (popsány jsou jen ty, které jsou zde oproti pluginu prohlížeče navíc):

AlternateLink – alternativní odkaz pro prohlížeče nepodporující přehrávání záznamů
AlternateLinkText – text alternativního odkazu
AudioOnly – nastaví rozměry přehrávače optimálně pro viditelnost pouze prvků pro audio
AllowChangeDisplaySize
AutoSize
AutoRewind
AutoStart
AnimationAtStart
Balance
BufferingTime
ClickToPlay
DisplaySize
EnableContextMenu
EnableFullScreenControls
EnableTracker
Height
Loop
MediaUrl – cesta k médiu
Mute
PlayCount
Rate
SelectionEnd
SelectionStart
ShowControls
ShowAudioControls
ShowDisplay
ShowGoToBar
ShowPositionControls
ShowStatusBar
ShowTracker
StandBy
TransparentAtStart
VideoBorderColor
VideoBorderWidth
Volume
Width

Závěrem zbývá dodat, že zdrojový kód ovládacího prvku je třeba zkompilovat a umístit do složky Bin, jak je také popsáno v předchozích článcích. Zkompilovanou knihovnu je pak možné umístit na panel vlastních prvků ve Visual Studiu nebo ve Webmatrixu pro snadnou práci s ní při vizuálním návrhu aplikace. Přehrávač můžeme použít jako přímo v ASP.NET stránce (a tu třeba zobrazit v novém okně nebo v rámci), tak ve vnořeném rámce ( iframe), a tak jej využít v jakékoli ne-ASP.NET stránce (statické HTML, PHP, ASP apod.).