Affichage de la vidéo dans un site pages Web ASP.NET (Razor)

Article
07/13/2023

Cet article explique comment utiliser un lecteur vidéo (multimédia) dans un site web pages Web ASP.NET (Razor) pour permettre aux utilisateurs d’afficher des vidéos stockées sur le site. pages Web ASP.NET avec la syntaxe Razor vous permet de lire des vidéos Flash (.swf), Media Player (.wmv) et Silverlight (.xap).

Ce que vous allez apprendre :

Comment choisir un lecteur vidéo.

Comment ajouter une vidéo à une page web.

Comment définir des attributs de lecteur vidéo.

Voici les fonctionnalités ASP.NET pages Razor introduites dans l’article :

L’assistance Video .

Versions logicielles utilisées dans le tutoriel

pages Web ASP.NET (Razor) 2

WebMatrix 2

Ce tutoriel fonctionne également avec WebMatrix 3.

Introduction

Vous souhaiterez peut-être afficher une vidéo sur votre site. Une façon de le faire est de créer un lien vers un site qui a déjà la vidéo, comme YouTube. Si vous souhaitez incorporer une vidéo de ces sites directement dans vos propres pages, vous pouvez généralement obtenir le balisage HTML à partir du site, puis la copier dans votre page. Par exemple, l’exemple suivant montre comment incorporer une vidéo 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>

Si vous souhaitez lire une vidéo qui se trouve sur votre propre site web (et non sur un site public de partage de vidéos), vous ne pouvez pas y lier directement à l’aide du balisage incorporé comme celui-ci. Toutefois, vous pouvez lire des vidéos à partir de votre site à l’aide de l’assistance Video , qui restitue un lecteur multimédia directement dans une page.

Choix d’un lecteur vidéo

Il existe de nombreux formats pour les fichiers vidéo, et chaque format nécessite généralement un lecteur différent et une façon différente de configurer le lecteur. Dans ASP.NET pages Razor, vous pouvez lire une vidéo dans une page web à l’aide de l’assistance Video . L’assistance Video simplifie le processus d’incorporation de vidéos dans une page web, car elle génère automatiquement les object éléments HTML et embed qui sont normalement utilisés pour ajouter la vidéo à la page.

L’assistance Video prend en charge les lecteurs multimédias suivants :

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Le Lecteur Flash

Le Flash lecteur de l’assistance Video vous permet de lire des vidéos Flash (fichiers .swf ) dans une page web. Au minimum, vous devez fournir un chemin d’accès au fichier vidéo. Si vous ne spécifiez rien d’autre que le chemin, le lecteur utilise des valeurs par défaut définies par la version actuelle de Flash. Les paramètres par défaut classiques sont les suivants :

La vidéo est affichée à l’aide de sa largeur et de sa hauteur par défaut et sans couleur d’arrière-plan.
La vidéo est lue automatiquement lors du chargement de la page.
La vidéo effectue une boucle continue jusqu’à ce qu’elle soit explicitement arrêtée.
La vidéo est mise à l’échelle pour afficher toute la vidéo, au lieu de la rogner pour qu’elle s’adapte à une taille spécifique.
La vidéo est lue dans une fenêtre.

Lecteur MediaPlayer

Le MediaPlayer lecteur de l’assistance Video vous permet de lire des vidéos Windows Media (fichiers .wmv ), de l’audio Windows Media (fichiers .wma ) et des fichiers MP3 ( fichiers.mp3 ) dans une page web. Vous devez inclure le chemin d’accès du fichier multimédia à lire ; tous les autres paramètres sont facultatifs. Si vous spécifiez uniquement un chemin d’accès, le lecteur utilise les paramètres par défaut définis par la version actuelle de MediaPlayer, tels que :

La vidéo est affichée à l’aide de sa largeur et de sa hauteur par défaut.
La vidéo est lue automatiquement lors du chargement de la page.
La vidéo est lue une seule fois (elle ne boucle pas).
Le lecteur affiche l’ensemble complet des contrôles dans l’interface utilisateur.
La vidéo est lue dans une fenêtre.

Lecteur Silverlight

Le Silverlight lecteur de l’assistance Video vous permet de lire des fichiers Vidéo Windows Media (fichiers .wmv ), Audio Windows Media (fichiers .wma ) et MP3 ( fichiers.mp3 ). Vous devez définir le paramètre path pour qu’il pointe vers un package d’application Silverlight (fichier .xap ). Vous devez également définir les paramètres de largeur et de hauteur. Tous les autres paramètres sont facultatifs. Lorsque vous utilisez le lecteur Silverlight pour la vidéo, si vous définissez uniquement les paramètres requis, le lecteur Silverlight affiche la vidéo sans couleur d’arrière-plan.

Notes

Si vous ne connaissez pas encore Silverlight : le fichier .xap est un fichier compressé qui contient des instructions de disposition dans un fichier .xaml , du code managé dans les assemblys et des ressources facultatives. Vous pouvez créer un fichier .xap dans Visual Studio en tant que projet d’application Silverlight.

Le Silverlight lecteur vidéo utilise à la fois les paramètres que vous fournissez pour le lecteur et les paramètres fournis dans le fichier .xap .

Conseil

Types MIME

Lorsqu’un navigateur télécharge un fichier, il s’assure que le type de fichier correspond au type MIME spécifié pour le document en cours de rendu. Le type MIME est le type de contenu ou de média d’un fichier. L’assistance Video utilise les types MIME suivants :

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

Lecture de vidéos Flash (.swf)

Cette procédure vous montre comment lire une vidéo Flash nommée sample.swf. La procédure suppose que vous disposez d’un dossier nommé Media sur votre site et que le fichier .swf se trouve dans ce dossier.

Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si vous ne l’avez pas déjà ajoutée.
Dans le site web, ajoutez une page et nommez-la FlashVideo.cshtml.

Ajoutez le balisage suivant à la page :

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

Exécutez la page dans un navigateur. (Vérifiez que la page est sélectionnée dans l’espace de travail Fichiers avant de l’exécuter.) La page s’affiche et la vidéo est lue automatiquement.

Vous pouvez définir le quality paramètre d’une vidéo Flash sur low, autolow, autohigh, medium, highet best:

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

Vous pouvez modifier la vidéo Flash à lire à une taille spécifique à l’aide du scale paramètre , que vous pouvez définir sur ce qui suit :

showall. Cela rend la vidéo entière visible tout en conservant les proportions d’origine. Toutefois, vous risquez de vous retrouver avec des bordures de chaque côté.
noorder. Cela permet de mettre à l’échelle la vidéo tout en conservant les proportions d’origine, mais elle peut être rognée.
exactfit. Cela rend la vidéo entière visible sans conserver les proportions d’origine, mais une distorsion peut se produire.

Si vous ne spécifiez pas de scale paramètre, la vidéo entière sera visible et les proportions d’origine seront conservées sans aucun rognage. L’exemple suivant montre comment utiliser le scale paramètre :

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

Le lecteur Flash prend en charge un paramètre de mode vidéo nommé windowMode. Vous pouvez définir ce paramètre sur window, opaqueet transparent. Par défaut, est windowMode défini sur window, qui affiche la vidéo dans une fenêtre distincte de la page web. Le opaque paramètre masque tout ce qui se cache derrière la vidéo sur la page web. Le transparent paramètre permet à l’arrière-plan de la page web de s’afficher dans la vidéo, en supposant que n’importe quelle partie de la vidéo est transparente.

Lecture de vidéos MediaPlayer (.wmv)

La procédure suivante vous montre comment lire une vidéo Windows Media nommée sample.wmv qui se trouve dans le dossier Media .

Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si ce n’est déjà fait.
Créez une page nommée MediaPlayerVideo.cshtml.

Ajoutez le balisage suivant à la page :

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

Exécutez la page dans un navigateur. La vidéo se charge et lit automatiquement.

Vous pouvez définir playCount sur un entier qui indique le nombre de fois où lire automatiquement la vidéo :

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

Le uiMode paramètre vous permet de spécifier les contrôles qui s’affichent dans l’interface utilisateur. Vous pouvez définir sur uiModeinvisible, none, miniou full. Si vous ne spécifiez pas de uiMode paramètre, la vidéo s’affiche avec la fenêtre status, la barre de recherche, les boutons de contrôle et les contrôles de volume en plus de la fenêtre vidéo. Ces contrôles s’affichent également si vous utilisez le lecteur pour lire un fichier audio. Voici un exemple d’utilisation du uiMode paramètre :

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

Par défaut, l’audio est activé lorsque la vidéo est lue. Vous pouvez désactiver le son en définissant le paramètre sur mute true :

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

Vous pouvez contrôler le niveau audio de la vidéo MediaPlayer en définissant le volume paramètre sur une valeur comprise entre 0 et 100. La valeur par défaut est 50. Voici un exemple :

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

Lecture de vidéos Silverlight

Cette procédure vous montre comment lire la vidéo contenue dans une page Silverlight .xap qui se trouve dans un dossier nommé Media.

Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si vous ne l’avez pas déjà fait.
Créez une page nommée SilverlightVideo.cshtml.

Ajoutez le balisage suivant à la page :

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