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.

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

• Silverlight 2 in Action – Ch. A. Campbell, J. Stockton, Manning 2008
• Knihovna MSDN
• Streaming media protocols