Gestion des vidéos

Gestion des vidéos
Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à
changement
Vous aimeriez utiliser des vidéos ? Si c'est le cas, sachez qu’il est facile de les afficher sur une page
Web. ASP.NET vous permet de lire des vidéos Flash (.swf), Media Player (.wmv), et Silverlight (.xap).
A la fin de ce chapitre, vous saurez :
•
•
•
Comment choisir un lecteur vidéo.
Comment ajouter une vidéo à une page Web.
Comment définir les attributs d’un lecteur vidéo.
Les fonctionnalités de programmation ASP.NET suivantes vous seront présentées dans ce chapitre :

L'assistant Video.
Choisir un lecteur vidéo
Il existe de nombreux formats de fichiers vidéo, et chaque format nécessite généralement un lecteur
différent, et une façon bien particulière de configurer celui-ci. Dans les pages Web ASP.NET, vous
pouvez lire une vidéo dans une page Web en utilisant l’assistant Video. Cet assistant simplifie le
processus d'intégration des vidéos dans une page Web, dans le sens où il génère automatiquement
l'objet et les éléments HTML d’intégration qui sont nécessaires pour ajouter de la vidéo à la page.
L’assistant Video prend en charge les lecteurs de médias suivants:
•
•
•
Adobe Flash
Windows Media Player
Microsoft Silverlight
Le lecteur Flash
Le lecteur Flash de l’assistant Video lit les vidéos Flash (fichiers .swf) dans une page Web. Il suffit au
minimum de lui fournir un chemin vers le fichier vidéo. Pour le reste, le lecteur utilise les valeurs par
défaut qui sont définies dans la version en cours de Flash. Les paramètres par défaut classiques sont:
•
•
•
•
•
La vidéo est affichée en utilisant la largeur et la hauteur par défaut et sans couleur de fond.
La vidéo est lue automatiquement au chargement de la page.
La lecture de la vidéo se répète en continu jusqu'à ce qu'elle soit explicitement arrêtée.
La vidéo est redimensionnée pour s’afficher en taille réelle, sans qu’il soit nécessaire de
l'adapter à une taille spécifique.
La vidéo s’exécute dans une fenêtre.
Le lecteur Media Player
Le lecteur MediaPlayer de l'assistant Video vous permet de lire des vidéos Windows Media (fichiers
.wmv), Windows Media Audio (fichiers .wma), et MP3 (fichiers .mp3) dans une page Web. Vous
devez configurer le chemin d’accès du fichier multimédia ; 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
dans la version en cours de Media Player, tels que:





La vidéo est affichée en utilisant sa largeur et sa hauteur par défaut.
La vidéo est lue automatiquement au chargement de la page.
La vidéo est lue une seule fois (la lecture ne se répète pas en boucle).
Le lecteur affiche l'ensemble des contrôles dans l'interface utilisateur.
La vidéo est lue dans une fenêtre.
Le lecteur Silverlight
Le lecteur Silverlight de l’assistant Video vous permet de lire des vidéos Windows Media (fichiers
.wmv), Windows Media Audio (fichiers .wma), et MP3 (fichiers .mp3). Vous devez définir le
paramètre chemin d’accès du fichier 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 de l’assistant Video, si vous réglez uniquement
les paramètres requis, le lecteur affiche la vidéo Silverlight sans couleur de fond.
Remarque: Si vous ne connaissez pas la technologie Silverlight : un fichier .xap est un fichier
compressé qui contient des instructions de mise en page dans un fichier .xaml, du code managé dans
des assemblages, et d’éventuelles ressources. Vous pouvez créer un fichier .xap à partir de Visual
Studio en créant un projet d'application Silverlight.
Le lecteur vidéo Silverlight utilise à la fois les paramètres que vous fournissez au lecteur, à la fois les
paramètres qui sont fournis dans le fichier .xap.
Types MIME
Quand un navigateur télécharge un fichier, il s'assure que le type de fichier correspond au type
MIME qui est spécifié pour le document affiché. Le type MIME est le type de contenu ou le type de
support d'un fichier. L’assistant Video utilise les types MIME suivants:
•
•
•
application/x-shockwave-flash
application/x-mplayer2
application/x-silverlight-2
Lire des vidéos Flash (.swf)
La procédure suivante montre comment lire une vidéo Flash nommé sample.swf. Cette procédure
suppose que vous avez un dossier nommé Media sur votre site dans lequel se trouve le fichier .swf à
lire.
1. Dans le site, ajoutez une page et nommez-la FlashVideo.cshtml.
2. Remplacez son contenu par ce qui suit :
<!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>
3. Exécutez la page dans un navigateur (Vérifier que la page est sélectionnée dans l’espace de
travail Files avant de lancer l’exécution). La page s’affiche et la vidéo se lance
automatiquement.
Vous pouvez définir le paramètre quality (qualité) d'une vidéo Flash à low, autolow, autohigh,
medium, high, et best:
// Configure la qualité de la vidéo
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")
Vous pouvez configurer une taille spécifique d’une vidéo Flash en utilisant le paramètre scale
(échelle), qui peut prendre les valeurs suivantes :
•
•
•
showall. Toute la vidéo est visible en conservant ses proportions d’origine. Par contre, vous
risquez de vous retrouver avec une bordure sur les quatre côtés.
noorder. La vidéo est redimensionnée, tout en conservant ses proportions d’origine, mais
une partie peut être coupée.
exactfit. La vidéo est affichée entièrement sans conserver ses proportions d'origine, donc il
peut y avoir une distorsion.
Si vous ne spécifiez pas ce paramètre d'échelle (scale), la vidéo s’affiche entièrement en conservant
ses proportions d’origine. L'exemple suivant montre comment utiliser le paramètre scale :
// Configure la video à une taille spécifique
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",
scale: "exactfit")
Le lecteur Flash prend en charge le mode de réglage vidéo nommé WindowMode. Vous pouvez le
définir à window, opaque et transparent. Par défaut, le paramètre WindowMode est fixé à window,
ce qui provoque l’affichage de la vidéo dans une fenêtre séparée de la page Web. Le réglage sur
opaque cache tout ce qui est derrière la vidéo dans la page Web. Le réglage à transparent permet de
voir l'arrière-plan de la page Web derrière la vidéo, en supposant que la vidéo est transparente.
Lire des vidéos Media Player (.wmv)
La procédure suivante montre comment lire une vidéo Windows Media nommée sample.wmv, située
dans le dossier Media.
1. Créez une nouvelle page nommée MediaPlayerVideo.cshtml.
2. Remplacez son contenu par ce qui suit :
<!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>
3. Exécutez la page dans un navigateur. La vidéo se charge et se lance automatiquement.
Vous pouvez configurer le paramètre playCount. Il s’agit d’un nombre entier qui indique combien de
fois la vidéo doit être jouée :
// Configure le paramètre playCount
@Video.Flash(path: "Media/sample.swf", playCount: 2)
Le paramètre uiMode permet de spécifier quels sont les contrôles à afficher dans l'interface
utilisateur. Vous pouvez définir uiMode à invisible, none, mini, ou full. Si vous ne spécifiez pas le
paramètre uiMode, la vidéo s’affiche avec la barre de statut, la barre de recherche, les commandes
de contrôle, et les commandes de volume en plus de la fenêtre vidéo. Ces contrôles seront
également affichés si vous utilisez le lecteur pour lire un fichier audio. Voici un exemple d’utilisation
du paramètre uiMode:
// Configure les contrôles affichés dans l’interface
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")
Par défaut, le son est allumé quand la vidéo s’exécute. Mais vous pouvez couper le son en définissant
le paramètre mute à la valeur true:
// Lire la video sans son
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)
Vous pouvez contrôler le niveau audio de la vidéo Media Player en définissant le paramètre volume à
une valeur comprise entre 0 et 100. La valeur par défaut est 50. Voici un exemple:
// Contrôler le volume du son de la vidéo
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)
Lire des vidéos Silverlight
L’exemple suivant montre comment lire une vidéo Silverlight nommée sample.xap, située dans le
dossier Media.
1. Créez une nouvelle page nommée SilverlightVideo.cshtml.
2. Remplacez son contenu par le suivant :
<!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>
3. Exécutez la page dans un navigateur.
Ressources supplémentaires


Silverlight Overview
Flash OBJECT and EMBED tag attributes

Windows Media Player 11 SDK PARAM Tags