C# - Multimédia állományok lejátszása a böngésző médiasávjában

forráskód letöltése
Az Internet Explorer 6-os verziója sok újdonsággal bír elődeihez képest, elegendő csak arra gondolnunk, hogy számtalan új objektum segít abban, hogy a hagyományos HTML-kódot élettel töltsük fel. A sok lehetőség közül cikkünkben kiragadjuk az Internet Explorer azon újdonságát, melynek segítségével a felhasználó által kért multimédia állományokat lejátszhatjuk a böngésző médiasávjában.
Mellékelt példa megnyitása előtt szükséges egy PlayMedia nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Napjaink Web alkalmazásaiban már mindennapos dolog, hogy a közölt tartalmat videókkal, zenei anyagokkal tesszük színesebbé, nem utolsó sorban szemléletesebbé. Mennyivel egyszerűbb dolog ugyanis valamit érzékeltetni akkor, ha a befogadó publikum több érzékszervére is hat egy időben az adott információ.
Az Internet Explorer 6-os verziójától kezdve elérhető az a lehetőség, melynek eredményeképpen a lejátszandó multimédiás anyag a böngésző multimédiasávjába, a képernyő egy különálló keretébe törlődik be.
A böngésző médiasávja alapértelmezésben engedélyezett, láthatóvá az eszköztár Multimédia gombjára kattintva tehető. Ekkor a képernyő bal felén látható lesz a Média Player eszközben már megismert kezelőpanel, a szükséges funkciókkal.
Annak érdekében, hogy a felhasználó által lejátszásra kért médiaállomány be is töltődjön ebbe a sávba, két dolgot kell tegyünk, mely egy kis kódolást igényel.
A megoldás lényege, hogy egyik Weblapunkon van a betöltés indítását végző gomb, vagy link, és egy másik lapon helyezzük el a tartalom megjelenítését végző elemeket.
Főoldal megvalósítása
A példában egy gombot helyeztünk el a weblapon, melyre klikkelve elindítjuk a betöltést. Ha nem a következőkben említett módszert használjuk, a médiaállomány elindítható ugyan, de a lejátszást egy külön ablakban megnyíló lejátszó végzi.
A WebForm1.aspx lapon a gomb ONCLICK eseménykezelőjét a következőképpen kell megadni, hogy a betöltés a médiasávba történjen:
function doPlay()
{
  window.open('WebForm2.aspx','_media');    
}
Látható, hogy nem teszünk mást, csupán nyitunk egy új böngészőablakot, betöltendő tartalomként megadjuk a WebForm2.aspx lapot, valamint az ablak megnyitásának módját meghatározandó, megadjuk a „_media” szócskát. Az említett szócska a hagyományos célhely-jelző szavak helyét foglalja el, mely egyéb esetekben lehetett volna akár „_blank” is. A „_media” elemet link esetében a TARGET attribútumban kellett volna elhelyezni.
Betöltendő tartalom oldala
A WebForm2.aspx lapon egy DIV elemet ruházunk fel annak képességével, hogy DHTML-metódusok meghívásával elindítsa a médiaállományt, majd információkat szolgáltasson róla.
A DHTML metódusok meghívása csak úgy lehetséges, hogy speciális deklarációval egy meghatározott „viselkedésre” (behavior) késztetjük a DIV objektumot. A deklaráció a következő:
<div id="divMedia" onPlayStateChange="(divProp.innerHTML = GetVideoInfo())" style="behavior:url(#default#mediaBar)">
</div>
A JavaScript kódban pedig már meghívhatjuk a mediaBar objektum metódusait, valamint eseményeire kezelőfüggvényeket definiálhatunk.
Az OnPlayStateChange eseményre definiáltunk egy GetVideoInfo metódust, mely információkat kérdez le a médiaállományról, a mediaBar objektum property-jeinek lekérdezésével. Az esemény akkor következik be, amikor a lejátszónak megváltozik a viselkedése, például elindul a lejátszás, leáll a művelet, vagy új állomány kerül lejátszásra.
A GetVideoInfo metódus visszatérési értéke egy karakterlánc, mely tartalmazza az adott állomány információit egy listában.
function GetVideoInfo()
{
  var returnStr = "<SPAN style='font-size:10pt;font-weight:bold'>Aktuálisan lejátszott állomány</SPAN><BR>";
Lekérdezzük az aktuálisan lejátszott állomány attribútumainak számát:
  count = divMedia.currentItem.attributeCount;
Majd végigmegyünk ezen a listán, és sorban felfűzzük őket:
  for(i=0; i < count; i++)
  {
    returnStr += i + ' - ' + divMedia.currentItem.getAttributeName(i);
    returnStr += ' - ' + divMedia.currentItem.getItemInfo(divMedia.currentItem.getAttributeName(i)) + "<BR>\n"; 
  } 
  return returnStr;
}
A lap betöltődésekor a <body> elem ONLOAD eseményébe tesszük a lejátszás indítását. Így biztosíthatjuk, hogy minden elem betöltődése, és a viselkedés definiálása után induljon csak a DIV elem metódusának meghívása, ellenkező esetben hibaüzenetet kapunk arról, hogy az objektum nem támogatja a műveletet.
<body onload="divMedia.playURL('http://localhost/PlayMedia/media/sample.asf','video/x-ms-asf');">
A lejátszandó állomány egy sample.asf nevű videó fájl, melynek betöltése a playURL metódus meghívásával indul. A metódusnak meg kell adnunk a fájl URL-jét, valamint MIME típusát, mely jelen esetben a „video/x-ms-asf” kifejezés.