Mostrar vídeo en un sitio de páginas web (Razor) de ASP.NET

Artículo
03/16/2024

En este artículo se explica cómo usar un reproductor de vídeo (multimedia) en un sitio web de ASP.NET Web Pages (Razor) para permitir a los usuarios ver vídeos almacenados en el sitio. ASP.NET Web Pages con sintaxis de Razor le permite reproducir vídeos de Flash (.swf), Media Player (.wmv) y Silverlight (.xap).

Temas que se abordarán:

Cómo elegir un reproductor de vídeo.

Cómo agregar vídeo a una página web.

Cómo establecer atributos del reproductor de vídeo.

Estas son las características de las páginas ASP.NET de Razor introducidas en el artículo:

El asistente Video.

Versiones de software usadas en el tutorial

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Este tutorial también funciona con WebMatrix 3.

Introducción

Es posible que quiera mostrar un vídeo en su sitio. Una manera de hacerlo es vincularlo a un sitio que ya tiene el vídeo, como YouTube. Si desea insertar un vídeo de estos sitios directamente en sus propias páginas, normalmente puede obtener el marcado HTML del sitio y, a continuación, copiarlo en la página. Por ejemplo, en el siguiente ejemplo se muestra cómo insertar un vídeo de 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 desea reproducir un vídeo que se encuentra en su propio sitio web (no en un sitio público de uso compartido de vídeo), no puede vincularlo directamente con el marcado incrustado como este. Sin embargo, puede reproducir vídeos desde el sitio mediante el asistente Video, que representa un reproductor multimedia directamente en una página.

Elección de un reproductor de vídeo

Hay muchos formatos de archivos de vídeo, y cada formato suele requerir un reproductor diferente y una forma distinta de configurarlo. En páginas ASP.NET de Razor, puede reproducir un vídeo en una página web mediante el asistente Video. El asistente Video simplifica el proceso de inserción de vídeos en una página web porque genera automáticamente los elementos HTML object y embed que se usan normalmente para agregar vídeo a la página.

El asistente Video admite los siguientes reproductores multimedia:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

El reproductor de Flash

El reproductor Flash del asistente Video le permite reproducir vídeos Flash (archivos.swf ) en una página web. Como mínimo, debe proporcionar una ruta de acceso al archivo de vídeo. Si no especifica nada más que la ruta de acceso, el reproductor usa los valores predeterminados establecidos por la versión actual de Flash. Los valores predeterminados típicos son:

El vídeo se muestra con su ancho y alto predeterminados y sin un color de fondo.
El vídeo se reproduce automáticamente cuando se carga la página.
El vídeo se repite continuamente hasta que se detiene explícitamente.
El vídeo se escala para mostrar todo el vídeo, en lugar de recortarlo para ajustarse a un tamaño específico.
El vídeo se reproduce en una ventana.

El reproductor de MediaPlayer

El reproductor de MediaPlayer del asistente Video permite reproducir Windows Media Video (archivos.wmv ), Windows Media Audio (archivos.wma ) y MP3 (archivos.mp3 ) en una página web. Debe incluir la ruta de acceso del archivo multimedia que se va a reproducir; todos los demás parámetros son opcionales. Si especifica solo una ruta de acceso, el reproductor usa la configuración predeterminada establecida por la versión actual de MediaPlayer, como:

El vídeo se muestra con su ancho y alto predeterminados.
El vídeo se reproduce automáticamente cuando se carga la página.
El vídeo se reproduce una vez (no se repite).
El reproductor muestra el conjunto completo de controles en la interfaz de usuario.
El vídeo se reproduce en una ventana.

El reproductor de Silverlight

El reproductor de Silverlight del asistente Video permite reproducir Windows Media Video (archivos.wmv ), Windows Media Audio (archivos.wma ) y MP3 (archivos.mp3). Debe establecer el parámetro path para que apunte a un paquete de aplicación basado en Silverlight (archivo .xap). También debe establecer los parámetros de ancho y alto. Todos los demás parámetros son opcionales. Cuando se usa el reproductor de Silverlight para vídeo, si se establecen solo los parámetros necesarios, el reproductor de Silverlight muestra el vídeo sin un color de fondo.

Nota:

En caso de que aún no conozca Silverlight: el archivo .xap es un archivo comprimido que contiene instrucciones de diseño en un archivo .xaml, código administrado en ensamblados y recursos opcionales. Puede crear un archivo .xap en Visual Studio como un proyecto de aplicación de Silverlight.

El reproductor de vídeo Silverlight usa tanto la configuración que se proporciona para el reproductor como la configuración que se proporciona en el archivo .xap.

Sugerencia

Tipos MIME

Cuando un explorador descarga un archivo, el explorador se asegura de que el tipo de archivo coincide con el tipo MIME especificado para el documento que se está representando. El tipo MIME es el tipo de contenido o el tipo multimedia de un archivo. El asistente Video usa los siguientes tipos MIME:

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

Reproducir vídeos flash (.swf)

Este procedimiento muestra cómo reproducir un vídeo flash denominado sample.swf. El procedimiento supone que tiene una carpeta denominada Media en el sitio y que el archivo .swf está en esa carpeta.

Agregue la biblioteca de asistentes web de ASP.NET a su sitio web, tal como se describe en Instalación de asistentes en un sitio de páginas web de ASP.NET, si aún no lo ha agregado.
En el sitio web, agregue una página y asígnele el nombre FlashVideo.cshtml.

Agregue el siguiente marcado a la página:

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

Ejecute la página en un explorador. (Asegúrese de que la página está seleccionada en el área de trabajo Archivos antes de ejecutarla) La página se muestra y el vídeo se reproduce automáticamente.

Puede establecer el parámetro quality de un vídeo Flash en low, autolow, autohigh, medium, high y best:

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

Puede cambiar el vídeo Flash para reproducirse en un tamaño específico mediante el parámetro scale, que puede establecer en lo siguiente:

showall. Esto hace que todo el vídeo sea visible al tiempo que mantiene la relación de aspecto original. Sin embargo, es posible que termine con bordes en cada lado.
noorder. Esto escala el vídeo mientras mantiene la relación de aspecto original, pero puede recortarse.
exactfit. Esto hace que todo el vídeo sea visible sin conservar la relación de aspecto original, pero puede producirse distorsión.

Si no especifica un parámetro scale, todo el vídeo estará visible y la relación de aspecto original se mantendrá sin recortar. En el siguiente ejemplo se muestra cómo usar el parámetro scale:

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

El reproductor Flash admite una configuración de modo de vídeo denominada windowMode. Puede establecerla en window, opaque y transparent. De forma predeterminada, el windowMode se establece en window, que muestra el vídeo en una ventana independiente de la página web. La configuración opaque oculta todo lo que hay detrás del vídeo en la página web. La configuración transparent permite que el fondo de la página web se muestre a través del vídeo, suponiendo que cualquier parte del vídeo sea transparente.

Reproducción de videos de MediaPlayer (.wmv)

En el siguiente procedimiento se muestra cómo reproducir un vídeo de Windows Media denominado sample.wmv que se encuentra en la carpeta Media.

Agregue la biblioteca de asistentes web de ASP.NET a su sitio web, tal como se describe en Instalación de asistentes en un sitio de ASP.NET Web Pages, si aún no lo ha hecho.
Cree una nueva página denominada MediaPlayerVideo.cshtml.

Agregue el siguiente marcado a la página:

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

Ejecute la página en un explorador. El vídeo se carga y reproduce automáticamente.

Puede establecer playCount en un entero que indique cuántas veces reproducir el vídeo automáticamente:

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

El parámetro uiMode permite especificar qué controles aparecen en la interfaz de usuario. Puede establecer uiMode en invisible, none, mini o full. Si no especifica un parámetro uiMode, el vídeo se mostrará con la ventana de estado, la barra de búsqueda, los botones de control y los controles de volumen además de la ventana de vídeo. Estos controles también se mostrarán si usa el reproductor para reproducir un archivo de audio. Este es un ejemplo de cómo usar el parámetro uiMode:

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

De forma predeterminada, el audio está activado cuando se reproduce el vídeo. Puede silenciar el audio estableciendo el parámetro mute en true:

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

Puede controlar el nivel de audio del vídeo MediaPlayer estableciendo el parámetro volume en un valor entre 0 y 100. El valor predeterminado es 50. Este es un ejemplo:

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

Reproducción de vídeos de Silverlight

Este procedimiento muestra cómo reproducir vídeo contenido en una página .xap de Silverlight que se encuentra en una carpeta denominada Media.

Agregue la biblioteca de asistentes web de ASP.NET a su sitio web, tal como se describe en Instalar asistentes en un sitio de ASP.NET Web Pages, si aún no lo ha hecho aún.
Cree una nueva página denominada SilverlightVideo.cshtml.

Agregue el siguiente marcado a la página:

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