Zobrazení videa na webu ASP.NET webových stránek (Razor)

Článek
07/13/2023

Tento článek vysvětluje, jak pomocí přehrávače videí (médií) na webu ASP.NET Web Pages (Razor) umožnit uživatelům prohlížet videa uložená na webu. ASP.NET webových stránek se syntaxí Razor umožňuje přehrávat videa Flash (.swf), Media Player (.wmv) a Silverlight (.xap).

Naučíte se:

Jak vybrat videopřehrávku.

Postup přidání videa na webovou stránku

Jak nastavit atributy přehrávače videa.

Toto jsou funkce ASP.NET razor pages uvedené v článku:

Pomocník Video .

Verze softwaru použité v tomto kurzu

ASP.NET webové stránky (Razor) 2

WebMatrix 2

Tento kurz funguje také s WebMatrix 3.

Úvod

Možná budete chtít na svém webu zobrazit video. Jedním ze způsobů, jak to udělat, je odkaz na web, který už video obsahuje, jako je YouTube. Pokud chcete vložit video z těchto webů přímo na své vlastní stránky, můžete obvykle získat kód HTML z webu a pak ho zkopírovat na stránku. Následující příklad například ukazuje, jak vložit video z YouTube:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Embedded Video Example</title>
    </head>
    <body>
        <h1>Embedded Video Example</h1>
        <p>The following video provides an introduction to WebMatrix:</p>
        <iframe width="560" 
                height="315" 
                src="http://www.youtube.com/embed/fxCEcPxUbYA" 
                frameborder="0" 
                allowfullscreen></iframe>
</body>
</html>

Pokud chcete přehrát video, které je na vašem vlastním webu (ne na veřejném webu pro sdílení videí), nemůžete na něj přímo vytvořit odkaz pomocí vložených značek, jako je tento. Videa z webu ale můžete přehrávat pomocí pomocníka Video , který vykreslí přehrávač médií přímo na stránce.

Výběr přehrávače videa

Existuje mnoho formátů pro videosoubory a každý formát obvykle vyžaduje jiný přehrávač a jiný způsob konfigurace přehrávače. V ASP.NET stránky Razor můžete přehrát video na webové stránce pomocí pomocné rutiny Video . Pomocník Video zjednodušuje proces vkládání videí na webovou stránku, protože automaticky generuje object prvky HTML a embed , které se obvykle používají k přidání videa na stránku.

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

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

The Flash Player

Přehrávač Flash pomocné rutiny Video umožňuje přehrávat videa Flash (soubory .swf ) na webové stránce. Minimálně musíte zadat cestu k videosouboru. Pokud nezadáte nic než cestu, přehrávač použije výchozí hodnoty, které jsou nastaveny aktuální verzí flashe. Typická výchozí nastavení jsou:

Video se zobrazí s výchozí šířkou a výškou a bez barvy pozadí.
Video se přehraje automaticky, když se stránka načte.
Video se nepřetržitě smyče, dokud se explicitně nezastaví.
Video se škáluje tak, aby zobrazoval celé video, místo aby se video ořízla tak, aby odpovídalo určité velikosti.
Video se přehrává v okně.

Přehrávač médií

Přehrávač MediaPlayer pomocného Video nástroje umožňuje přehrávat videa windows media (soubory .wmv ), zvuk windows media (soubory .wma ) a soubory MP3 (.mp3 soubory) na webové stránce. Musíte zahrnout cestu k multimediálnímu souboru, který chcete přehrát; Všechny ostatní parametry jsou volitelné. Pokud zadáte pouze cestu, přehrávač použije výchozí nastavení nastavená aktuální verzí MediaPlayeru, například:

Video se zobrazí s použitím výchozí šířky a výšky.
Video se přehraje automaticky, když se stránka načte.
Video se přehraje jednou (nesmyčuje se).
Přehrávač zobrazí úplnou sadu ovládacích prvků v uživatelském rozhraní.
Video se přehrává v okně.

Přehrávač Silverlightu

Přehrávač Silverlight pomocné rutiny Video umožňuje přehrávat Windows Media Video (soubory .wmv ), Windows Media Audio (soubory .wma ) a MP3 (.mp3 soubory). Parametr path musíte nastavit tak, aby odkazovat na balíček aplikace založený na technologii Silverlight (soubor .xap ). Musíte také nastavit parametry šířky a výšky. Všechny ostatní parametry jsou volitelné. Pokud pro video použijete přehrávač Silverlight a nastavíte jenom požadované parametry, zobrazí přehrávač Silverlight video bez barvy pozadí.

Poznámka

Pokud ještě neznáte Silverlight: soubor .xap je komprimovaný soubor, který obsahuje pokyny k rozložení v souboru .xaml , spravovaný kód v sestaveních a volitelné prostředky. V sadě Visual Studio můžete vytvořit soubor .xap jako projekt aplikace Silverlight.

Přehrávač Silverlight videa používá nastavení, která zadáte pro přehrávač, i nastavení, která jsou uvedená v souboru .xap .

Tip

Typy MIME

Když prohlížeč stáhne soubor, prohlížeč zajistí, aby typ souboru odpovídal typu MIME zadanému pro vykreslovaný dokument. Typ MIME je typ obsahu nebo média souboru. Pomocník Video používá následující typy MIME:

application/x-shockwave-flash
application/x-mplayer2
application/x-silverlight-2

Přehrávání videí Flash (.swf)

Tento postup ukazuje, jak přehrát flashové video s názvem sample.swf. Postup předpokládá, že na svém webu máte složku s názvem Media a že soubor .swf je v této složce.

Přidejte na web knihovnu pomocníků ASP.NET webu, jak je popsáno v tématu Instalace pomocných rutin na webu ASP.NET webových stránek, pokud jste ji ještě nepřidali.
Na webu přidejte stránku a pojmenujte ji FlashVideo.cshtml.

Přidejte na stránku následující kód:

<!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>

Spusťte stránku v prohlížeči. (Než stránku spustíte, ujistěte se, že je v pracovním prostoru Soubory vybraná.) Zobrazí se stránka a video se automaticky přehraje.

Parametr pro video Flash můžete nastavit quality na low, autolow, autohigh, medium, high, a best:

<!-- Set the Flash video quality -->
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

Video Flash můžete změnit tak, aby se přehrávaly v určité velikosti pomocí parametru scale , který můžete nastavit na následující:

showall. Díky tomu bude celé video viditelné při zachování původního poměru stran. Můžete ale skončit s ohraničeními na každé straně.
noorder. Tím se video škáluje při zachování původního poměru stran, ale může se oříznout.
exactfit. Díky tomu bude celé video viditelné bez zachování původního poměru stran, ale může dojít ke zkreslení.

Pokud nezadáte scale parametr, bude vidět celé video a původní poměr stran se zachová bez oříznutí. Následující příklad ukazuje, jak použít scale parametr:

<!-- Set the Flash video to an exact size -->
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",
    scale: "exactfit")

Přehrávač Flash podporuje nastavení režimu videa s názvem windowMode. Můžete ho nastavit na window, opaquea transparent. Ve výchozím nastavení windowMode je nastavená hodnota na windowhodnotu , která zobrazí video v samostatném okně na webové stránce. Nastavení opaque skryje všechno za videem na webové stránce. Nastavení transparent umožňuje zobrazit pozadí webové stránky prostřednictvím videa za předpokladu, že je jakákoli část videa průhledná.

Přehrávání videí MediaPlayer (.wmv)

Následující postup ukazuje, jak přehrát video Windows Media s názvem sample.wmv , které je ve složce Media .

Přidejte na svůj web knihovnu ASP.NET webových pomocných rutin, jak je popsáno v tématu Instalace pomocných rutin na webu ASP.NET webových stránek, pokud jste to ještě neudělali.
Vytvořte novou stránku s názvem MediaPlayerVideo.cshtml.

Přidejte na stránku následující kód:

<!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>

Spusťte stránku v prohlížeči. Video se načte a přehraje automaticky.

Můžete nastavit playCount na celé číslo, které určuje, kolikrát se má video přehrát automaticky:

<!-- Set the MediaPlayer video playCount -->
@Video.MediaPlayer(path: "Media/sample.wmv", playCount: 2)

Parametr uiMode umožňuje určit, které ovládací prvky se zobrazí v uživatelském rozhraní. Můžete nastavit uiMode na invisible, none, mininebo full. Pokud nezadáte uiMode parametr, video se zobrazí společně s oknem videa se stavovým oknem, panelem hledání, ovládacími tlačítky a ovládacími prvky hlasitosti. Tyto ovládací prvky se také zobrazí, pokud použijete přehrávač k přehrání zvukového souboru. Tady je příklad použití parametru uiMode :

<!-- Set the MediaPlayer control UI -->
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

Ve výchozím nastavení je zvuk při přehrávání videa zapnutý. Zvuk můžete ztlumit nastavením parametru mute na true:

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

Úroveň zvuku videa MediaPlayer můžete ovládat nastavením parametru volume na hodnotu mezi 0 a 100. Výchozí hodnota je 50. Tady je příklad:

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

Přehrávání videí Silverlightu

Tento postup ukazuje, jak přehrávat video obsažené na stránce Silverlight .xap , která je ve složce s názvem Media.

Přidejte na svůj web knihovnu webových pomocných rutin ASP.NET, jak je popsáno v tématu Instalace pomocných rutin na webu ASP.NET webových stránek, pokud jste to ještě neudělali .
Vytvořte novou stránku s názvem SilverlightVideo.cshtml.

Přidejte na stránku následující kód:

<!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>