Visualizzazione di video in un sito di Pagine Web ASP.NET (Razor)

Articolo
07/13/2023

Questo articolo illustra come usare un lettore video (multimediale) in un sito Web di Pagine Web ASP.NET (Razor) per consentire agli utenti di visualizzare i video archiviati nel sito. Pagine Web ASP.NET con la sintassi Razor consente di riprodurre video Flash (.swf), Media Player (.wmv) e Silverlight (.xap).

Contenuto dell'esercitazione:

Come scegliere un lettore video.

Come aggiungere video a una pagina Web.

Come impostare gli attributi del lettore video.

Queste sono le funzionalità delle pagine Razor ASP.NET introdotte nell'articolo:

Helper Video .

Versioni software usate nell'esercitazione

Pagine Web ASP.NET (Razor) 2

WebMatrix 2

Questa esercitazione funziona anche con WebMatrix 3.

Introduzione

Potresti voler visualizzare un video sul tuo sito. Un modo per farlo è collegare a un sito che ha già il video, come YouTube. Se vuoi incorporare un video da questi siti direttamente nelle tue pagine, in genere puoi ottenere markup HTML dal sito e copiarlo nella pagina. Ad esempio, l'esempio seguente illustra come incorporare un video di 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>

Se vuoi riprodurre un video che si trova sul tuo sito Web (non in un sito pubblico di condivisione video), non puoi collegarlo direttamente a esso usando markup incorporato come questo. Tuttavia, è possibile riprodurre video dal sito usando l'helper, che esegue il Video rendering di un lettore multimediale direttamente in una pagina.

Scelta di un lettore video

Esistono molti formati per i file video e ogni formato richiede in genere un lettore diverso e un modo diverso per configurare il lettore. In ASP.NET pagine Razor è possibile riprodurre un video in una pagina Web usando l'helper Video . L'helper Video semplifica il processo di incorporamento di video in una pagina Web perché genera automaticamente gli object elementi HTML e embed usati normalmente per aggiungere video alla pagina.

L'helper Video supporta i lettori multimediali seguenti:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

The Flash Player

Il Flash lettore dell'helper Video consente di riprodurre video Flash (file con estensione swf ) in una pagina Web. Come minimo, devi fornire un percorso al file video. Se non si specifica altro che il percorso, il lettore utilizza i valori predefiniti impostati dalla versione corrente di Flash. Le impostazioni predefinite tipiche sono:

Il video viene visualizzato utilizzando la larghezza e l'altezza predefinite e senza un colore di sfondo.
Il video viene riprodotto automaticamente al caricamento della pagina.
Il video scorre continuamente fino a quando non viene arrestato in modo esplicito.
Il video viene ridimensionato per mostrare tutto il video, invece di ritagliare il video in base a una dimensione specifica.
Il video viene riprodotto in una finestra.

The MediaPlayer Player

Il MediaPlayer lettore dell'helper Video consente di riprodurre video di Windows Media (file con estensione wmv ), audio di Windows Media (file con estensione wma ) e MP3 ( file.mp3 ) in una pagina Web. È necessario includere il percorso del file multimediale da riprodurre; tutti gli altri parametri sono facoltativi. Se specifichi solo un percorso, il lettore usa le impostazioni predefinite impostate dalla versione corrente di MediaPlayer, ad esempio:

Il video viene visualizzato usando la larghezza e l'altezza predefinite.
Il video viene riprodotto automaticamente al caricamento della pagina.
Il video viene riprodotto una sola volta (non viene eseguito il ciclo).
Il lettore visualizza il set completo di controlli nell'interfaccia utente.
Il video viene riprodotto in una finestra.

Il lettore Silverlight

Il Silverlight lettore dell'helper Video consente di riprodurre Windows Media Video (file con estensione wmv ), Windows Media Audio (file con estensione wma ) e MP3 ( file.mp3 ). È necessario impostare il parametro path in modo che punti a un pacchetto dell'applicazione basato su Silverlight (file con estensione xap ). È inoltre necessario impostare i parametri di larghezza e altezza. Tutti gli altri parametri sono facoltativi. Quando si usa il lettore Silverlight per il video, se si impostano solo i parametri necessari, il lettore Silverlight visualizza il video senza un colore di sfondo.

Nota

Se non si conosce già Silverlight: il file con estensione xap è un file compresso che contiene le istruzioni di layout in un file xaml , il codice gestito negli assembly e le risorse facoltative. È possibile creare un file con estensione xap in Visual Studio come progetto di applicazione Silverlight.

Il Silverlight lettore video usa entrambe le impostazioni fornite per il lettore e le impostazioni fornite nel file con estensione xap .

Suggerimento

Tipi MIME

Quando un browser scarica un file, il browser verifica che il tipo di file corrisponda al tipo MIME specificato per il documento di cui viene eseguito il rendering. Il tipo MIME è il tipo di contenuto o il tipo di supporto di un file. L'helper Video usa i tipi MIME seguenti:

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

Riproduzione di video flash (.swf)

Questa procedura illustra come riprodurre un video Flash denominato sample.swf. La procedura presuppone che sia presente una cartella denominata Media nel sito e che il file con estensione swf si trovi in tale cartella.

Aggiungere la libreria helper Web di ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato aggiunto.
Nel sito Web aggiungere una pagina e denominarla FlashVideo.cshtml.

Aggiungere il markup seguente alla pagina:

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

Eseguire la pagina in un browser. Assicurarsi che la pagina sia selezionata nell'area di lavoro File prima di eseguirla. La pagina viene visualizzata e il video viene riprodotto automaticamente.

È possibile impostare il quality parametro per un video Flash su low, , autohighautolow, medium, highe best:

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

È possibile modificare il video Flash per la riproduzione con una dimensione specifica usando il scale parametro , che è possibile impostare su quanto segue:

showall. Ciò rende visibile l'intero video mantenendo le proporzioni originali. Tuttavia, è possibile che si verifichino bordi su ogni lato.
noorder. Questo ridimensiona il video mantenendo le proporzioni originali, ma potrebbe essere ritagliato.
exactfit. Ciò rende visibile l'intero video senza conservare le proporzioni originali, ma può verificarsi una distorsione.

Se non specifichi un scale parametro, l'intero video sarà visibile e le proporzioni originali verranno mantenute senza alcun ritaglio. Nell'esempio seguente viene illustrato come usare il scale parametro :

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

Il lettore Flash supporta un'impostazione in modalità video denominata windowMode. È possibile impostare questa proprietà su window, opaquee transparent. Per impostazione predefinita, l'oggetto windowMode è impostato su window, che visualizza il video in una finestra separata nella pagina Web. L'impostazione opaque nasconde tutto dietro il video nella pagina Web. L'impostazione transparent consente di visualizzare lo sfondo della pagina Web attraverso il video, presupponendo che qualsiasi parte del video sia trasparente.

Riproduzione di video di MediaPlayer (.wmv)

La procedura seguente illustra come riprodurre un video Window Media denominato sample.wmv presente nella cartella Media .

Aggiungere la libreria helper Web di ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato fatto.
Creare una nuova pagina denominata MediaPlayerVideo.cshtml.

Aggiungere il markup seguente alla pagina:

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

Eseguire la pagina in un browser. Il video viene caricato e riprodotto automaticamente.

È possibile impostare su playCount un numero intero che indica il numero di volte in cui riprodurre automaticamente il video:

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

Il uiMode parametro consente di specificare quali controlli vengono visualizzati nell'interfaccia utente. È possibile impostare uiModeinvisiblesu , none, minio full. Se non specifichi un uiMode parametro, il video verrà visualizzato con la finestra di stato, la barra di ricerca, i pulsanti di controllo e i controlli del volume oltre alla finestra video. Questi controlli verranno visualizzati anche se si utilizza il lettore per riprodurre un file audio. Ecco un esempio di come usare il uiMode parametro :

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

Per impostazione predefinita, l'audio è attivato quando il video viene riprodotto. È possibile disattivare l'audio impostando il mute parametro su true:

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

Puoi controllare il livello audio del video MediaPlayer impostando il volume parametro su un valore compreso tra 0 e 100. Il valore predefinito è 50. Ecco un esempio:

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

Riproduzione di video silverlight

Questa procedura illustra come riprodurre video contenuti in una pagina silverlight con estensione xap che si trova in una cartella denominata Media.

Aggiungere la libreria helper Web ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato fatto .
Creare una nuova pagina denominata SilverlightVideo.cshtml.

Aggiungere il markup seguente alla pagina:

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