Wyświetlanie wideo w witrynie ASP.NET Web Pages (Razor)

Artykuł
07/13/2023

W tym artykule wyjaśniono, jak używać odtwarzacza wideo (multimediów) w witrynie internetowej ASP.NET Web Pages (Razor), aby umożliwić użytkownikom wyświetlanie filmów wideo przechowywanych w witrynie. ASP.NET stron internetowych ze składnią Razor umożliwia odtwarzanie filmów wideo Flash (.endorf), Media Player (.wo) i Silverlight (.xap).

Zawartość:

Jak wybrać odtwarzacz wideo.

Jak dodać wideo do strony internetowej.

Jak ustawić atrybuty odtwarzacza wideo.

Są to ASP.NET funkcje stron Razor wprowadzone w artykule:

Pomocnik Video .

Wersje oprogramowania używane w samouczku

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Ten samouczek działa również z programem WebMatrix 3.

Wprowadzenie

Możesz wyświetlić film wideo w witrynie. Jednym ze sposobów, aby to zrobić, jest link do witryny, która ma już wideo, takie jak YouTube. Jeśli chcesz osadzić klip wideo z tych witryn bezpośrednio na własnych stronach, zwykle możesz pobrać znaczniki HTML z witryny, a następnie skopiować je na stronę. Na przykład w poniższym przykładzie pokazano, jak osadzić film wideo w serwisie 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>

Jeśli chcesz odtworzyć film wideo, który znajduje się na własnej stronie internetowej (a nie w publicznej witrynie do udostępniania wideo), nie możesz bezpośrednio połączyć się z nim przy użyciu osadzonych znaczników, takich jak to. Możesz jednak odtwarzać filmy wideo z witryny przy użyciu Video pomocnika, który renderuje odtwarzacz multimedialny bezpośrednio na stronie.

Wybieranie odtwarzacza wideo

Istnieje wiele formatów plików wideo, a każdy format zazwyczaj wymaga innego odtwarzacza i innego sposobu konfigurowania odtwarzacza. Na ASP.NET stronach Razor można odtworzyć film wideo na stronie internetowej przy użyciu Video pomocnika. Pomocnik Video upraszcza proces osadzania filmów wideo na stronie internetowej, ponieważ automatycznie generuje object elementy i embed HTML, które są zwykle używane do dodawania wideo do strony.

Pomocnik Video obsługuje następujących odtwarzaczy multimedialnych:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Odtwarzacz flash

Odtwarzacz FlashVideo pomocnika pozwala odtwarzać filmy flash (pliki w plikach w języku flash ) na stronie internetowej. Co najmniej musisz podać ścieżkę do pliku wideo. Jeśli nie określisz nic oprócz ścieżki, odtwarzacz używa wartości domyślnych ustawionych przez bieżącą wersję programu Flash. Typowe ustawienia domyślne to:

Wideo jest wyświetlane przy użyciu domyślnej szerokości i wysokości oraz bez koloru tła.
Wideo jest odtwarzane automatycznie po załadowaniu strony.
Klip wideo jest stale zapętlany, dopóki nie zostanie jawnie zatrzymany.
Wideo jest skalowane, aby pokazać wszystkie wideo, a nie przycinanie wideo w celu dopasowania do określonego rozmiaru.
Wideo jest odtwarzane w oknie.

Odtwarzacz MediaPlayer

Odtwarzacz MediaPlayerVideo pomocnika pozwala odtwarzać pliki wideo z systemem Windows Media (pliki w formacie jpeg ), windows media audio (pliki wma ) i MP3 ( pliki.mp3 ) na stronie internetowej. Musisz dołączyć ścieżkę pliku multimedialnego do odtwarzania; wszystkie inne parametry są opcjonalne. Jeśli określisz tylko ścieżkę, odtwarzacz używa ustawień domyślnych ustawionych przez bieżącą wersję programu MediaPlayer, na przykład:

Wideo jest wyświetlane przy użyciu domyślnej szerokości i wysokości.
Wideo jest odtwarzane automatycznie po załadowaniu strony.
Wideo jest odtwarzane raz (nie jest to pętla).
Odtwarzacz wyświetla pełny zestaw kontrolek w interfejsie użytkownika.
Wideo jest odtwarzane w oknie.

Odtwarzacz Silverlight

Odtwarzacz SilverlightVideo pomocnika umożliwia odtwarzanie plików Windows Media Video (pliki w formacie windows media), Windows Media Audio (pliki wma ) i MP3 ( pliki.mp3 ). Należy ustawić parametr path, aby wskazywał pakiet aplikacji oparty na programie Silverlight (plik xap ). Należy również ustawić parametry szerokości i wysokości. Wszystkie inne parametry są opcjonalne. Jeśli używasz odtwarzacza Silverlight do wideo, jeśli ustawisz tylko wymagane parametry, odtwarzacz Silverlight wyświetla wideo bez koloru tła.

Uwaga

Jeśli jeszcze nie znasz programu Silverlight: plik xap jest skompresowanym plikiem zawierającym instrukcje układu w pliku xaml , kod zarządzany w zestawach i opcjonalne zasoby. Plik xap można utworzyć w programie Visual Studio jako projekt aplikacji Silverlight.

Odtwarzacz Silverlight wideo używa zarówno ustawień udostępnianych dla odtwarzacza, jak i ustawień podanych w pliku xap .

Porada

Typy MIME

Gdy przeglądarka pobierze plik, przeglądarka upewnia się, że typ pliku jest zgodny z typem MIME określonym dla renderowanego dokumentu. Typ MIME to typ zawartości lub typ nośnika pliku. Pomocnik Video używa następujących typów MIME:

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

Odtwarzanie filmów flashowych (.również)

W tej procedurze pokazano, jak odtworzyć film flash o nazwie sample.pb. W procedurze przyjęto założenie, że masz folder o nazwie Media w witrynie i że plik .xml znajduje się w tym folderze.

Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET stron sieci Web, jeśli jeszcze jej nie dodano.
W witrynie internetowej dodaj stronę i nadaj jej nazwę FlashVideo.cshtml.

Dodaj następujący znacznik do strony:

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

Uruchom stronę w przeglądarce. (Przed uruchomieniem strony upewnij się, że strona została wybrana w obszarze roboczym Pliki ). Strona jest wyświetlana, a wideo jest odtwarzane automatycznie.

Parametr wideo flash można ustawić quality na low, , autohighautolow, medium, highi best:

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

Wideo flash można zmienić tak, aby odtwarzało się o określonym rozmiarze przy użyciu parametru scale , który można ustawić na następujące:

showall. Dzięki temu cały film wideo jest widoczny przy zachowaniu oryginalnego współczynnika proporcji. Można jednak skończyć z obramowaniem po każdej stronie.
noorder. Spowoduje to skalowanie filmu wideo przy zachowaniu oryginalnego współczynnika proporcji, ale może zostać przycięte.
exactfit. Dzięki temu cały film jest widoczny bez zachowania oryginalnego współczynnika proporcji, ale może wystąpić zniekształcenie.

Jeśli nie określisz parametru scale , cały film będzie widoczny, a oryginalny współczynnik proporcji zostanie zachowany bez przycinania. W poniższym przykładzie pokazano, jak używać parametru scale :

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

Odtwarzacz Flash obsługuje ustawienie trybu wideo o nazwie windowMode. Możesz ustawić tę wartość na window, opaquei transparent. Domyślnie jest windowMode ustawiona wartość window, która wyświetla film wideo w osobnym oknie na stronie internetowej. Ustawienie opaque ukrywa wszystko za filmem wideo na stronie internetowej. Ustawienie transparent umożliwia wyświetlanie tła strony internetowej za pośrednictwem filmu wideo, przy założeniu, że dowolna część filmu wideo jest przezroczysta.

Odtwarzanie filmów wideo z odtwarzacza MediaPlayer (.także)

W poniższej procedurze pokazano, jak odtworzyć film wideo z nośnikiem okna o nazwie sample.echa , który znajduje się w folderze Media .

Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET stron sieci Web, jeśli jeszcze tego nie zrobiono.
Utwórz nową stronę o nazwie MediaPlayerVideo.cshtml.

Dodaj następujący znacznik do strony:

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

Uruchom stronę w przeglądarce. Wideo ładuje się i odtwarza automatycznie.

Można ustawić playCount na liczbę całkowitą wskazującą, ile razy odtwarzać wideo automatycznie:

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

Parametr uiMode umożliwia określenie kontrolek wyświetlanych w interfejsie użytkownika. Można ustawić uiMode wartość invisible, , mininonelub full. Jeśli nie określisz uiMode parametru, wideo będzie wyświetlane z oknem stanu, paskiem wyszukiwania, przyciskami sterowania i kontrolkami głośności oprócz okna wideo. Te kontrolki będą również wyświetlane, jeśli używasz odtwarzacza do odtwarzania pliku audio. Oto przykład użycia parametru uiMode :

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

Domyślnie dźwięk jest włączony, gdy wideo jest odtwarzane. Dźwięk można wyciszyć, ustawiając parametr na mute true:

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

Poziom dźwięku wideo MediaPlayer można kontrolować, ustawiając volume parametr na wartość z zakresu od 0 do 100. Wartość domyślna to 50. Oto przykład:

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

Odtwarzanie wideo programu Silverlight

Ta procedura przedstawia sposób odtwarzania wideo zawartego na stronie xap programu Silverlight znajdującej się w folderze o nazwie Media.

Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET Web Pages, jeśli jeszcze tego nie zrobiono.
Utwórz nową stronę o nazwie SilverlightVideo.cshtml.

Dodaj następujące znaczniki do strony:

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