10 – Práce s videem

 
 

 

Tato kapitola vysvětluje, jak na webových stránkách ASP.NET se syntaxí Razor zobrazit video.

Webové stránky ASP.NET se syntaxí Razor umožňují přehrávat videa ve formátu Flash (SWF), Media Player (WMV) a Silverlight (XAP).

Co se naučíte:

V této kapitole budou představeny následující funkce webových stránek ASP.NET se syntaxí Razor:

 

 

Volba přehrávače videa

Existuje celá řada formátů videosouborů a každý formát obvykle vyžaduje odlišný přehrávač s odlišným způsobem konfigurace. Na webových stránkách ASP.NET se syntaxí Razor je možné přehrávat video s použitím pomocné třídy Video. Pomocná třída Video zjednodušuje proces vložení videa na webovou stránku díky tomu, že automaticky generuje elementy objectembed jazyka HTML, které obvykle slouží k přidání videa na stránku.

Pomocná třída Video podporuje následující přehrávače médií:

Přehrávač Flash Player

Přehrávač Flash pomocné třídy Video umožňuje přehrávat na webové stránce videa ve formátu Flash (soubory SWF). Musí být určena alespoň cesta k videosouboru. Pokud kromě cesty neurčíte nic jiného, přehrávač použije výchozí hodnoty nastavené aktuální verzí aplikace Flash. Obvyklá výchozí nastavení jsou:

Přehrávač Media Player

Přehrávač MediaPlayer pomocné třídy Video umožňuje přehrávat na webových stránkách videa ve formátu Windows Media (soubory WMV), audio ve formátu Windows Media (soubory WMA) a soubory MP3. Je třeba uvést cestu k mediálnímu souboru. Všechny ostatní parametry jsou volitelné. V případě, že určíte jen cestu, přehrávač použije výchozí hodnoty nastavené aktuální verzí aplikace Media Player, a sice:

Přehrávač Silverlight Player

Přehrávač Silverlight pomocné třídy Video umožňuje přehrávat videa ve formátu Windows Media (soubory WMV), audio ve formátu Windows Media (soubory WMA) a soubory MP3. Je nutné nastavit parametr path (cesta) tak, aby odkazoval na balíček aplikace Silverlight (soubor XAP). Je také nutné nastavit parametry width (šířka) a height (výška). Všechny ostatní parametry jsou volitelné. Pokud při přehrávání videa pomocí přehrávače Silverlight nastavíte pouze požadované parametry, přehrávač Silverlight video zobrazí bez barvy pozadí.

Poznámka   Pokud technologii Silverlight ještě neznáte: soubor XAP je komprimovaný soubor obsahující instrukce pro rozložení uvedené v souboru XAML, spravovaný kód a volitelné prostředky. Soubor XAP je možné vytvořit v rámci sady Visual Studio jako projekt aplikace Silverlight.

Přehrávač videa Silverlight používá nastavení, které přehrávači explicitně poskytnete, a také nastavení uvedená v souboru XAP.

Přehrávání videa ve formátu Flash (souborů SWF)

Tento postup ukazuje, jak přehrát video ve formátu Flash s názvem sample.swf. Tento postup předpokládá, že na svém webu máte složku s názvem Media (Média) a že soubor SWF se nachází v této složce.

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových objektů ASP.NET tak, jak popisuje kapitola 1 – Začínáme se sadou WebMatrix a webovými stránkami ASP.NET.
  2. Na web přidejte stránku s názvem FlashVideo.cshtml.
  3. Do stránky přidejte následující kód značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
    <head> 
        <title>Flash Video</title> 
    </head> 
    <body> 
        @Video.Flash(path: "Media/sample.swf", 
                     width: "400", 
                     height: "600", 
                     play: true, 
                     loop: true, 
                     menu:  false, 
                     bgColor: "red", 
                     quality: "medium", 
                     scale: "exactfit", 
                     windowMode: "transparent") 
    </body> 
    </html>
  4. Spusťte stránku v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.) Stránka bude zobrazena a video se automaticky začne přehrávat.

    ch10video-1

Pro video ve formátu Flash můžete nastavit parametr quality (kvalita) na hodnotu low (nízká), autolow (automatická, nízká), autohigh (automatická, vysoká), medium (střední), high (vysoká) nebo best (nejlepší):


// Nastavení kvality videa ve formátu Flash 
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

Můžete změnit, v jaké konkrétní velikosti má být video ve formátu Flash přehráváno, pomocí parametru scale (měřítko), který je možné nastavit na následující hodnoty:

Pokud parametr scale (měřítko) neuvedete, bude viditelné celé video a bude zachován původní poměr stran bez oříznutí. Následující příklad ukazuje způsob použití parametru scale (měřítko):


// Nastavení videa ve formátu Flash na konkrétní velikost 
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100", 
    scale: "exactfit")

Přehrávač Flash Player podporuje nastavení, které určuje režim videa, s názvem windowMode (režim okna). Pro toto nastavení je možné použít hodnoty window (v okně), opaque (neprůhledný) a transparent (průhledný). Výchozí hodnotou nastavení windowMode je hodnota window (v okně), která video na webové stránce zobrazí v samostatném okně. Nastavení opaque (neprůhledný) skryje vše, co se na webové stránce nachází za videem. Nastavení transparent (průhledný) umožňuje, aby pozadí webové stránky prostupovalo videem, za předpokladu, že alespoň určitá část videa bude průhledná.

Přehrávání videa ve formátu MediaPlayer (souborů WMV)

Následující postup ukazuje, jak přehrát video ve formátu Windows Media s názvem sample.wmv, které se nachází ve složce Media (Média).

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1.
  2. Vytvořte novou stránku s názvem MediaPlayerVideo.cshtml.
  3. Do stránky přidejte následující kód značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
    <head> 
      <title>MediaPlayer Video</title> 
    </head> 
    <body> 
        @Video.MediaPlayer( 
            path: "Media/sample.wmv", 
            width: "400", 
            height: "600", 
            autoStart: true, 
            playCount: 2, 
            uiMode:  "full", 
            stretchToFit: true, 
            enableContextMenu: true, 
            mute: false, 
            volume: 75) 
    </body> 
    </html>
  4. Spusťte stránku v prohlížeči. Video se načte a začne se automaticky přehrávat.

    ch10video-2

Můžete nastavit parametr playCount (počet přehrání) na celočíselnou hodnotu určující, kolikrát se má video automaticky přehrát:


// Nastavení parametru playCount pro přehrávání videa v přehrávači MediaPlayer 
@Video.Flash(path: "Media/sample.swf", playCount: 2)

Parametr uiMode (režim uživatelského rozhraní) umožňuje určit, jaké ovládací prvky mají být zobrazeny v uživatelském rozhraní. Parametr uiMode je možné nastavit na hodnotu invisible (neviditelné), none (žádné), mini nebo full (úplné). Pokud pro parametr uiMode neurčíte žádnou hodnotu, bude kromě okna videa zobrazeno stavové okno, vyhledávací pruh, ovládací tlačítka a ovládání hlasitosti. Tyto ovládací prvky budou zobrazeny také v případě, že přehrávač použijete k přehrání zvukového souboru. Následující příklad ukazuje, jak použít parametr uiMode:


// Nastavení ovládacích prvků v uživatelském rozhraní přehrávače MediaPlayer 
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

Ve výchozím nastavení je při přehrávání videa zapnut zvuk. Zvuk je možné ztlumit nastavením parametru mute (ztlumit) na hodnotu true:


// Přehrání videa v přehrávači MediaPlayer bez zvuku 
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

úroveň hlasitosti videa v přehrávači MediaPlayer je možné řídit nastavením parametru volume (hlasitost) na hodnotu v rozmezí 0 až 100. Výchozí hodnota je 50. Zde je příklad:


// Přehrání videa v přehrávači MediaPlayer bez zvuku 
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

Přehrávání videa ve formátu Silverlight

Tento postup ukazuje, jak přehrát video obsažené ve stránce XAP technologie Silverlight, která se nachází ve složce s názvem Media (Média).

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1.
  2. Vytvořte novou stránku s názvem SilverlightVideo.cshtml.
  3. Do stránky přidejte následující kód značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
    <head> 
      <title>Silverlight Video</title> 
    </head> 
    <body> 
        @Video.Silverlight( 
            path: "Media/sample.xap", 
            width: "400", 
            height: "600", 
            bgColor: "red", 
            autoUpgrade: true) 
    </body> 
    </html>
  4. Spusťte stránku v prohlížeči.

    ch10video-3

Další materiály

Přehled technologie Silverlight

Atributy značek OBJECT a EMBED aplikace Flash

Popis značek PARAM v sadě Windows Media Player 11 SDK

Referenční příručka pro webové stránky ASP.NET se syntaxí Razor