Anzeigen eines Videos auf einer ASP.NET Web Pages(Razor)-Website

Artikel
07/13/2023

In diesem Artikel wird erläutert, wie Sie einen Video(Media)-Player auf einer ASP.NET Web Pages -Website (Razor) verwenden, damit Benutzer Videos anzeigen können, die auf der Website gespeichert sind. ASP.NET Web Pages mit Razor-Syntax können Sie Flash-Videos (.swf), Media Player (.wmv) und Silverlight (.xap) wiedergeben.

Sie lernen Folgendes:

So wählen Sie einen Videoplayer aus.

So fügen Sie einer Webseite Videos hinzu.

Festlegen von Videoplayerattributen

Dies sind die ASP.NET Razor-Seiten-Features, die im Artikel vorgestellt werden:

Das Video Hilfsprogramm.

Im Tutorial verwendete Softwareversionen

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Dieses Tutorial funktioniert auch mit WebMatrix 3.

Einführung

Möglicherweise möchten Sie ein Video auf Ihrer Website anzeigen. Eine Möglichkeit, dies zu tun, besteht darin, auf eine Website zu verlinken, auf der das Video bereits vorhanden ist, z. B. YouTube. Wenn Sie ein Video von diesen Websites direkt in Ihre eigenen Seiten einbetten möchten, können Sie in der Regel HTML-Markup von der Website abrufen und es dann in Ihre Seite kopieren. Das folgende Beispiel zeigt beispielsweise, wie Sie ein YouTube-Video einbetten:

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

Wenn Sie ein Video wiedergeben möchten, das sich auf Ihrer eigenen Website (nicht auf einer öffentlichen Videofreigabewebsite) befindet, können Sie mithilfe von eingebettetem Markup wie diesem nicht direkt darauf verweisen. Sie können Jedoch Videos von Ihrer Website wiedergeben, indem Sie das Video Hilfsprogramm verwenden, das einen Media Player direkt auf einer Seite rendert.

Auswählen eines Videoplayers

Es gibt viele Formate für Videodateien, und jedes Format erfordert in der Regel einen anderen Player und eine andere Möglichkeit zum Konfigurieren des Players. Auf ASP.NET Razor-Seiten können Sie mithilfe des Video Hilfsprogramm ein Video auf einer Webseite wiedergeben. Das Video Hilfsprogramm vereinfacht das Einbetten von Videos in eine Webseite, da es automatisch die HTML-Elemente und embed generiert, die object normalerweise zum Hinzufügen von Videos zur Seite verwendet werden.

Das Video Hilfsprogramm unterstützt die folgenden MediaPlayer:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Der Flash-Player

Mit Flash dem Player des Video Hilfsprogrammes können Sie Flash-Videos (.swf-Dateien ) auf einer Webseite wiedergeben. Mindestens müssen Sie einen Pfad zur Videodatei angeben. Wenn Sie nichts als den Pfad angeben, verwendet der Player Standardwerte, die von der aktuellen Version von Flash festgelegt werden. Typische Standardeinstellungen sind:

Das Video wird mit der Standardbreite und -höhe und ohne Hintergrundfarbe angezeigt.
Das Video wird automatisch wiedergegeben, wenn die Seite geladen wird.
Das Video wird kontinuierlich ausgeführt, bis es explizit beendet wird.
Das Video wird skaliert, um das gesamte Video anzuzeigen, anstatt das Video so zuschneiden, dass es einer bestimmten Größe entspricht.
Das Video wird in einem Fenster wiedergegeben.

MediaPlayer-Player

Mit MediaPlayer dem Player des Video Hilfsprogramm können Sie Windows Media-Videos (WMV-Dateien ), Windows Media-Audio (WMA-Dateien ) und MP3 (.mp3 Dateien) auf einer Webseite wiedergeben. Sie müssen den Pfad der Mediendatei angeben, die wiedergegeben werden soll. alle anderen Parameter sind optional. Wenn Sie nur einen Pfad angeben, verwendet der Player standardeinstellungen, die von der aktuellen Version von MediaPlayer festgelegt sind, z. B.:

Das Video wird mit der Standardbreite und -höhe angezeigt.
Das Video wird automatisch wiedergegeben, wenn die Seite geladen wird.
Das Video wird einmal wiedergegeben (es wird keine Schleife ausgeführt).
Der Player zeigt den vollständigen Satz von Steuerelementen in der Benutzeroberfläche an.
Das Video wird in einem Fenster wiedergegeben.

Silverlight-Player

Mit Silverlight dem Player des Video Hilfsprogrammes können Sie Windows Media Video (WMV-Dateien ), Windows Media Audio (WMA-Dateien ) und MP3 (.mp3 Dateien) wiedergeben. Sie müssen den Pfadparameter so festlegen, dass er auf ein Silverlight-basiertes Anwendungspaket (XAP-Datei ) verweist. Außerdem müssen Sie die Breiten- und Höhenparameter festlegen. Alle anderen Parameter sind optional. Wenn Sie den Silverlight-Player für Video verwenden, zeigt der Silverlight-Player das Video ohne Hintergrundfarbe an, wenn Sie nur die erforderlichen Parameter festlegen.

Hinweis

Falls Sie Silverlight noch nicht kennen: Die XAP-Datei ist eine komprimierte Datei, die Layoutanweisungen in einer XAML-Datei , verwalteten Code in Assemblys und optionale Ressourcen enthält. Sie können eine XAP-Datei in Visual Studio als Silverlight-Anwendungsprojekt erstellen.

Der Silverlight Videoplayer verwendet sowohl die Einstellungen, die Sie für den Player angeben, als auch die Einstellungen, die in der XAP-Datei bereitgestellt werden.

Tipp

MIME-Typen

Wenn ein Browser eine Datei herunterlädt, stellt der Browser sicher, dass der Dateityp dem MIME-Typ entspricht, der für das gerenderte Dokument angegeben ist. Der MIME-Typ ist der Inhalts- oder Medientyp einer Datei. Das Video Hilfsprogramm verwendet die folgenden MIME-Typen:

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

Wiedergeben von Flash-Videos (.swf)

In diesem Verfahren erfahren Sie, wie Sie ein Flash-Video mit dem Namen sample.swf wiedergeben. Bei der Prozedur wird davon ausgegangen, dass Sie einen Ordner mit dem Namen Media auf Ihrer Website haben und dass sich die SWF-Datei in diesem Ordner befindet.

Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, sofern Sie sie noch nicht hinzugefügt haben.
Fügen Sie auf der Website eine Seite hinzu, und nennen Sie sie FlashVideo.cshtml.

Fügen Sie der Seite das folgende Markup hinzu:

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

Führen Sie die Seite in einem Browser aus. (Stellen Sie sicher, dass die Seite im Arbeitsbereich Dateien ausgewählt ist , bevor Sie sie ausführen.) Die Seite wird angezeigt, und das Video wird automatisch wiedergegeben.

Sie können den quality Parameter für ein Flash-Video auf low, , autolow, mediumautohighhighund bestfestlegen:

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

Sie können das Flash-Video so ändern, dass es in einer bestimmten Größe wiedergegeben wird, indem Sie den Parameter verwenden, den scale Sie auf Folgendes festlegen können:

showall. Dadurch wird das gesamte Video sichtbar, während das ursprüngliche Seitenverhältnis beibehalten wird. Es kann jedoch sein, dass Sie auf jeder Seite Grenzen haben.
noorder. Dadurch wird das Video skaliert, wobei das ursprüngliche Seitenverhältnis beibehalten wird, es kann jedoch zugeschnitten werden.
exactfit. Dadurch wird das gesamte Video sichtbar, ohne das ursprüngliche Seitenverhältnis beizubehalten, aber es kann zu Verzerrungen kommen.

Wenn Sie keinen Parameter angeben scale , wird das gesamte Video angezeigt, und das ursprüngliche Seitenverhältnis wird ohne Zuschneiden beibehalten. Das folgende Beispiel zeigt die Verwendung des scale Parameters:

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

Der Flash-Player unterstützt eine Videomoduseinstellung namens windowMode. Sie können dies auf window, opaqueund transparentfestlegen. Standardmäßig ist auf windowMode festgelegt window, wodurch das Video in einem separaten Fenster auf der Webseite angezeigt wird. Die opaque Einstellung blendet alles hinter dem Video auf der Webseite aus. Die transparent Einstellung lässt den Hintergrund der Webseite durch das Video anzeigen, vorausgesetzt, dass ein Teil des Videos transparent ist.

Wiedergeben von MediaPlayer (.wmv) Videos

Das folgende Verfahren zeigt, wie Sie ein Fenstermedienvideo mit dem Namen sample.wmv wiedergeben, das sich im Ordner Medien befindet.

Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, sofern noch nicht geschehen.
Erstellen Sie eine neue Seite mit dem Namen MediaPlayerVideo.cshtml.

Fügen Sie der Seite das folgende Markup hinzu:

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

Führen Sie die Seite in einem Browser aus. Das Video wird automatisch geladen und wiedergegeben.

Sie können eine ganze Zahl festlegen playCount , die angibt, wie oft das Video automatisch wiedergegeben werden soll:

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

Mit uiMode dem Parameter können Sie angeben, welche Steuerelemente auf der Benutzeroberfläche angezeigt werden. Sie können auf invisible, none, minioder fullfestlegenuiMode. Wenn Sie keinen Parameter angebenuiMode, wird das Video zusätzlich zum Videofenster mit dem status Fenster, der Suchleiste, den Steuerungsschaltflächen und der Lautstärke angezeigt. Diese Steuerelemente werden auch angezeigt, wenn Sie den Player zum Wiedergeben einer Audiodatei verwenden. Hier sehen Sie ein Beispiel für die Verwendung des uiMode Parameters:

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

Standardmäßig ist audio aktiviert, wenn das Video wiedergegeben wird. Sie können das Audio stummschalten, indem Sie den mute Parameter auf true festlegen:

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

Sie können den Audiopegel des MediaPlayer-Videos steuern, indem Sie den volume Parameter auf einen Wert zwischen 0 und 100 festlegen. Der Standardwert ist 50. Hier sehen Sie ein Beispiel:

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

Wiedergeben von Silverlight-Videos

In diesem Verfahren erfahren Sie, wie Sie Videos wiedergeben, die in einer Silverlight-XAP-Seite enthalten sind, die sich in einem Ordner mit dem Namen Media befindet.

Fügen Sie ihrer Website die ASP.NET-Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, falls Sie dies noch nicht getan haben.
Erstellen Sie eine neue Seite mit dem Namen SilverlightVideo.cshtml.

Fügen Sie der Seite das folgende Markup hinzu:

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