Použití flexibilního ovládacího prvku MediaElement jako opakovatelně použitelného povrchu

Přehrávání videa nebo zvuku je na platformě Silverlight jednoduché. Stačí přidat ovládací prvek MediaElement a nastavit jeho vlastnost Source (Zdroj) na adresu URL média. Ovládací prvek vystavuje metody a události umožňující řídit přehrávání a je možné ho využit různými způsoby. Při přehrávání zvuku zůstává prvek MediaElement skrytý. Při přehrávání videa se prvek MediaElement chová jako opakovatelně použitelný povrch.

V této lekci se podíváme, jak lze ovládacího prvek MediaPlayer dodávaný s nástrojem Expression Encoder použít pro jednoduché přehrávání. Také si krok za krokem projdeme vytvoření a použití štětce VideoBrush (Video štětec) pro vyplnění textu.

Vytvoření nového projektu 

01 Vytvoření nového projektu

Spusťte program Blend a použijte položku nabídky File > New Project (Soubor > Nový projekt). Jako typ projektu zvolte Silverlight 3 Application + Website (Aplikace + web platformy Silverlight 3) a projekt pojmenujte BasicMedia (Základní média). Po stisknutí klávesy OK bude projekt vytvořen a na pracovní ploše Artboard bude otevřena hlavní stránka MainPage.

Přidání prvku MediaPlayer 

02 Přidání prvku MediaPlayer

Pokud jste spolu s programem Expression Blend nainstalovali také nástroj Expression Encoder, najdete na panelu Assets (Materiály) ovládací prvek MediaPlayer. Pokud jste nástroj Encoder nenainstalovali, přejděte na krok 05. Jinak nakreslete na pracovní ploše Artboard ovládací prvek MediaPlayer.

Přidejte video do seznamu stop 

03 Přidejte video do seznamu stop

Na panelu Properties (Vlastnosti) v sekci Media (Média) klikněte na tlačítko New (Nový) vedle seznamu stop. Přidejte položku do seznamu kliknutím na tlačítko „…“ zobrazené vedle položek. V novém okně klikněte na tlačítko Add another Item (Přidat další položku) a nastavte vlastnost MediaSource (Zdroj média) nové položky na toto inspirativní video z uvedení platformy Silverlight 3 (zkopírujte tuto adresu URL). Pokud chcete, můžete použít jiné hostované video. Ověřte jenom, že používá podporovaný kodek (WMV, VC-1, H.264). Kliknutím na tlačítko OK ukončete editor položek.

Vyzkoušejte si prvek MediaPlayer 

04 Vyzkoušejte si prvek MediaPlayer

Spusťte projekt stisknutím klávesy F5 a vyzkoušejte si ovládací MediaPlayer prvek v akci. Toto je nejsnadnější způsob, jak můžete ovládací prvek MediaPlayer přidat do své aplikace. Tento přehrávač poskytuje funkce jako AutoPlay (automatické přehrávání), Download Progress (průběh stahování), Fullscreen (celoobrazovkové video), nově otevíraná okna a úplné ovládací prvky přenosu. Pro úpravu vzhledu můžete použít další skiny dostupné prostřednictvím nástroje Expression Encoder nebo můžete přímo upravovat šablonu přehrávače, když na něj kliknete pravým tlačítkem a zvolíte příkaz Edit Template -> Edit a Copy (Upravit šablonu -> Upravit kopii).

Přidání prvku MediaElement 

05 Přidání prvku MediaElement

Budeme se dále věnovat základům práce s médii a podíváme se na hlavní ovládací prvek určený pro zobrazení videa – MediaElement. Odstraňte přehrávač MediaPlayer a na pracovní ploše Artboard nakreslete ovládací prvek MediaElement. Nastavte vlastnost Source (Zdroj) na video z uvedení platformy Silverlight 3 (zkopírujte tuto adresu URL) nebo libovolné jiné video. MediaElement je kontejner pro video nebo zvuk, který vystavuje metody a události umožňující řídit přehrávání.

Přidejte blok textu 

06 Přidejte blok textu

V prvním příkladu na této stránce byl prvek MediaElement použit jako součást ovládacího prvku MediaPlayer pro řízení přehrávání videa. My se nyní podíváme, jak je možné prvek MediaElement použít jako zdroj pro štětec vyplnění textu. Přidejte blok textu pod prvek MediaElement a jako font použijte něco velkého, například Verdana : tučné písmo : 48pt, a použijte nějaký vtipný text, například „Video Killed the Radio Star“.

Vytvořte štětec VideoBrush 

07 Vytvořte štětec VideoBrush

Vyberte prvek MediaElement a z horní nabídky vyberte položku Tools > Make Brush Resource > Make Video Brush (Nástroje > Vytvořit prostředek štětce > Vytvořit video štětec). Nový prostředek VideoBrush (Video štětec) nazvěte mediaBrush (mediální štětec) a klikněte na tlačítko OK. Vyberte blok textu a pro vlastnost Foreground Brush (Štětec popředí) použijte prostředek mediaBrush tak, že ho vyberete na kartě Brush Resources (Prostředky štětců). Nachází se přímo pod ní v řádku pro výběr typu štětce.

Podívejte se, jak se video přehrává v textu 

08 Podívejte se, jak se video přehrává v textu

Spusťte projekt stisknutím klávesy F5 a sledujte video z prvku MediaElement použité jako štětec pro vyplnění textu. Krásné na tom je to, že video je staženo a dekódováno pouze jednou, takže nejste postiženi žádným omezením výkonu.

Upravte štětec VideoBrush 

09 Upravte štětec VideoBrush

Prostředky můžete kdykoli upravit tak, že přistoupíte na kartu Resource (Prostředek) a přejdete na správné místo. V tomto případě se prostředek mediaBrush nachází v rámci nabídky MainPage.xaml > [UserControl]. Zde můžete upravit vlastnosti Stretch (Roztažení) nebo Opacity (Průhlednost) a změnit tak vzhled štětce.

Ještě jednou!  

10 Ještě jednou!

Spusťte znovu projekt stisknutím klávesy F5 a sledujte, jak se projevily změny provedené u prostředku mediaBrush. Výborně!

Pokud se chcete naučit ještě něco víc o použití médií v programu Expression Blend, můžete si přečíst článek Přehled zvuku a videa na webu MSDN.