Přejít k navigační liště

Zdroják » Různé » Úvod do streamování médií v Silverlightu 2.0

Úvod do streamování médií v Silverlightu 2.0

Články Různé

V tomto článku si popíšeme základní principy streamování médií v Silverlightu. Podíváme se na to, v čem se proces streamování v Silverlightu liší od jiných technologií a jak vlastně pracuje. Článek zakončíme malým příkladem.

Video na internetu

V současné době se pomalu mění struktura podávaného obsahu na internetu a čím dál více je využíváno video. Jedná se v celku o logický krok, jelikož audiovizuální vjem je pro člověka jednodušeji pochopitelný než čtení textu s obrázky (tuto situaci jsme v historii již jednou zažili, když se obliba tištěného textu rapidně snížila nástupem nejdříve rádiového a posléze právě televizního vysílání).

S touto přeměnou se také zvýšila poptávka po technologiích umožňujících přenášet video či audio na internetu. V současné době je naprostou jedničkou na internetu Flash. A má to také své odůvodnění. Dále se také setkáme s několika dalšími nástroji umožňujícími přehrávání videa na internetu (MediaPlayer, DivX web player a mnoho dalších).

Těchto nástrojů bude v budoucnu ještě více přibývat, jelikož z videa na internetu se stal obrovský business. A v budoucnu bude ještě dále expandovat, jelikož tento trh má obrovský potenciál. Již několik minulých událostí na tuto skutečnost ukazuje, například inauguraci Baracka Obamy sledovaly na internetu miliony lidí (BBC se dokonce po půl hodině vysílání díky obrovskému zájmu zhroutil jejich přehrávač iPlayer). Nebo přenosy sportovních událostí, jako jsou Mistrovství Evropy ve fotbale, olympiáda nebo evropská Liga mistrů (vše již jsme na internetu měli možnost sledovat).

Silverlight a video na internetu

Kdybych chtěl přehánět tak bych mohl říci, že jedna z předností Silverlightu se mu do určité míry stala zkázou. Ano, Silverlight práci s multimédii ovládá perfektně. A tak první velké uskutečněné projekty v Silverlightu byly právě zaměřené na streaming videa (vzpomeňme například na živé vysílání z olympijských her v Pekingu). Tudíž se do podvědomí lidí Silverlight zanesl jako technologie pro streamování videa. Doposud slýchávám věty typu: „Aha, Silverlight, to je ta technologie na přehrávání videa na internetu.“

Technologie a podporované formáty

Ještě než se pustíme do příkladu, na kterém si ukážeme práci s videem v Silverlightu, povíme si, jak je vlastně celý streaming videa v Silverlightu zajištěn. Silverlight používá pro streaming protokol MMS (Microsoft Media Server/Service). Ten zajišťuje aplikaci na straně klienta navázání přímého spojení se zdrojovým souborem na straně serveru, k tomu využívá UDP a TCP. Toto spojení umožňuje obrovskou výhodu, jelikož se následně můžete libovolně pohybovat (skákat) po celém souboru.

V Silverlightu 2.0 jsou podporovány tyto formáty:

Video:

  • WMV1: Windows Media Video 7
  • WMV2: Windows Media Video 8
  • WMV3: Windows Media Video 9
  • WMVA: Windows Media Video Advanced Profile, non-VC-1
  • WMVC1: Windows Media Video Advanced Profile, VC-1

Audio:

  • WMA 7: Windows Media Audio 7
  • WMA 8: Windows Media Audio 8
  • WMA 9: Windows Media Audio 9
  • WMA 10: Windows Media Audio 10
  • MP3: ISO/MPEG Layer-3

V současné verzi také Silverlight podporuje streaming videa v HD (High Definition) tedy v rozlišení až 1920×1080. V následující verzi Silverlightu 3.0 se dále objeví podpora kodeku (standardu) H.264 a dalších formátů (např. ACC).

První krůčky

Pojďme se nyní podívat na základy práce s médii v technologii Silverlight 2.0. Záměrně nepoužívám pouze slovo video, ale médium, jelikož v Silverlightu se pro oba prvky používá stejná komponenta MediaElement . Je tomu tak z toho důvodu, že většinu definovaných atributů a vlastností mají stejné a liší se jen v několika věcech, které přímo náleží povaze média (například hlasitost u zvuku nebo vykreslování u videa). Dalším důvodem také je, že zvuk je přímo součástí videa.

Nyní si na naši stránku vložíme prosté video. V atributu Source se definuje zdroj videa. Pokud máte video na stejném serveru můžete použít například cestu Source=“Videa/video.wmv“. V našem případě využíváme jako zdroj video, které je umístěno na jiném serveru.

<MediaElement x:Name="MojeVideo"
              Source="http://honza.zlubinaci.eu/video.wmv"/> 

Nyní si naše video trochu vylepšíme o pár vlastností (výšku, šířku a AutoPlay nastavíme na False, aby se nám video nespustilo hned po načtení, ale až po nějakém našem zásahu).

<MediaElement x:Name="MojeVideo"
              Source="http://honza.zlubinaci.eu/video.wmv"
              Height="250"
              Width="350"
              AutoPlay="False"/> 

Obsluha videa

Poslední věcí, kterou si v tomto článku ukážeme, je základní obsluha videa. Tou základní obsluhou mám na mysli spuštění, pozastavení a zastavení videa. Nejjednodušší variantou, jak tyto příkazy na video uplatnit, je zavolat je po stisknutí tlačítka. Proto si pro každou funkci vytvoříme jedno tlačítko. U tlačítek pause a stop nastavíme IsEnabled na False, jelikož video je po načtení zastaveno, tak nemá smysl na něj volat funkce Pause() ani  Stop().

<!--play-->
<Button x:Name="bt_play"
        Content="Play"
        Height="20"
        Width="100"
        Margin="10"
        Click="bt_play_Click"/>

<!--pause-->
<Button x:Name="bt_pause"
        Content="Pause"
        Height="20"
        Width="100"
        Margin="10"
        IsEnabled="False"
        Click="bt_pause_Click"/>

<!--stop-->
<Button x:Name="bt_stop"
        Content="Stop"
        Height="20"
        Width="100"
        Margin="10"
        IsEnabled="False"
        Click="bt_stop_Click"/> 

Teď nám již zbývá jen doplnit obslužné funkce videa do volaných událostí tlačítky. Nesmíme zapomenout na zprovozňování a vypínání tlačítek dle současného stavu videa.

//
//tlacitko play
//
private void bt_play_Click(object sender, RoutedEventArgs e)
{
    //spusteni videa
    MojeVideo.Play();

    //zapnuti tlacitek pause a stop
    bt_pause.IsEnabled = true;
    bt_stop.IsEnabled = true;

    //vypnuti tlacitka play
    bt_play.IsEnabled = false;
}

//
//tlacitko pause
//
private void bt_pause_Click(object sender, RoutedEventArgs e)
{
    //pozastaveni videa
    MojeVideo.Pause();

    //zapnuti tlacitka play
    bt_play.IsEnabled = true;

    //vypnuti tlacitka pause
    bt_pause.IsEnabled = false;
}

//
//tlacitko stop
//
private void bt_stop_Click(object sender, RoutedEventArgs e)
{
    //zastaveni videa
    MojeVideo.Stop();

    //zapnuti tlacitka play
    bt_play.IsEnabled = true;

    //vypnuti tlacitek pause a stop
    bt_stop.IsEnabled = false;
    bt_pause.IsEnabled = false;
} 

V tuto chvíli, pokud si spustíme naší aplikaci, zobrazí se v prohlížeči jednoduchý přehrávač videa, na kterém si můžeme dané funkce otestovat.

Ukázková aplikace s přehráváním videa

Výsledná aplikace. Můžete si ji vyzkoušet online nebo získat zdrojové kódy.

Příště

V příštím článku se trochu více ponoříme do práce s médii. Vše si budeme demonstrovat na příkladu jednoduchého přehrávače.

Zdroje

Publikujete video s použitím Silverlightu?

Komentáře

Subscribe
Upozornit na
guest
5 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
ja

To je skvělé. Ne počkat není, ono mi to nefunguje. Silve…compile…2…1…fuc…aha. Plánujete publikovat video s použitím Silverlightu? [x] Ne, nazdar.

Otázka do pléna, proč tenkrát flash ve videu převálcoval wmp(co se týče videa nejspíš kvalitnější a méně náročnější)?

ja

1. Ano, nezobrazuje. Linux je pochopitelně ten černej vzadu, díky sofiině volbě Microsoftu nepodpory linuxu vs. rozšíření to asi nikdy nebude ono…i když, třeba ne…

2. WMP právě objektivně (videem) lepší než flash je a přesto flash video nejvíc zpopularizovalo, přesně proto přemýšlím jestli silverlight někdy v tomhle nahradí flash, resp. nevidím jediný důvod.

Jo s tou konzistentností mám stejný pocit, moc dobře si pamatuju jak mi spousta videí nefungovala, další měla špatnou velikost a to vše jenom proto, že autor stránky měl jinou verzi přehrávače. Pokud k tomu přičtu nicneříkající chybové hlášky tak zlost byla na světě…

VfB

protože flash player má v prohlížeči nainstalovaný každý, ale SL jen Hulán a několik dalších Waffen MS (jdou spočítat na prstech) a navíc SL plugin jde nainstalovat jen při příznivé konstalaci hvězd

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.