Exibindo vídeo em um site de Páginas da Web do ASP.NET (Razor)

Artigo
07/13/2023

Este artigo explica como usar um player de vídeo (mídia) em um site do Páginas da Web do ASP.NET (Razor) para permitir que os usuários exibam vídeos armazenados no site. Páginas da Web do ASP.NET com sintaxe Razor permite reproduzir vídeos flash (.swf), Media Player (.wmv) e Silverlight (.xap).

O que você aprenderá:

Como escolher um player de vídeo.

Como adicionar vídeo a uma página da Web.

Como definir atributos do player de vídeo.

Estes são os ASP.NET recursos de páginas Razor introduzidos no artigo:

O Video auxiliar.

Versões de software usadas no tutorial

Páginas da Web do ASP.NET (Razor) 2

WebMatrix 2

Este tutorial também funciona com o WebMatrix 3.

Introdução

Talvez você queira exibir um vídeo em seu site. Uma maneira de fazer isso é vincular a um site que já tem o vídeo, como o YouTube. Se você quiser inserir um vídeo desses sites diretamente em suas próprias páginas, geralmente poderá obter marcação HTML do site e, em seguida, copiá-lo para sua página. Por exemplo, o exemplo a seguir mostra como inserir um vídeo do 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 você quiser reproduzir um vídeo que esteja em seu próprio site (não em um site público de compartilhamento de vídeo), não poderá vincular diretamente a ele usando marcação inserida como esta. No entanto, você pode reproduzir vídeos do seu site usando o Video auxiliar , que renderiza um media player diretamente em uma página.

Escolhendo um Player de Vídeo

Há muitos formatos para arquivos de vídeo, e cada formato normalmente requer um player diferente e uma maneira diferente de configurar o player. Em ASP.NET páginas do Razor, você pode reproduzir um vídeo em uma página da Web usando o Video auxiliar . O Video auxiliar simplifica o processo de inserção de vídeos em uma página da Web porque gera automaticamente os object elementos HTML e embed que normalmente são usados para adicionar vídeo à página.

O Video auxiliar dá suporte aos seguintes media players:

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

O Flash Player

O Flash player do Video auxiliar permite que você reproduza vídeos Flash (arquivos .swf ) em uma página da Web. No mínimo, você precisa fornecer um caminho para o arquivo de vídeo. Se você especificar nada além do caminho, o player usará valores padrão definidos pela versão atual do Flash. As configurações padrão típicas são:

O vídeo é exibido usando sua largura e altura padrão e sem uma cor da tela de fundo.
O vídeo é reproduzido automaticamente quando a página é carregada.
O vídeo é executado continuamente até ser interrompido explicitamente.
O vídeo é dimensionado para mostrar todo o vídeo, em vez de cortar o vídeo para se ajustar a um tamanho específico.
O vídeo é reproduzido em uma janela.

O MediaPlayer Player

O MediaPlayer player do Video auxiliar permite que você reproduza vídeos do Windows Media (arquivos .wmv ), áudio do Windows Media (arquivos .wma ) e MP3 ( arquivos.mp3 ) em uma página da Web. Você deve incluir o caminho do arquivo de mídia a ser reproduzido; todos os outros parâmetros são opcionais. Se você especificar apenas um caminho, o player usará as configurações padrão definidas pela versão atual do MediaPlayer, como:

O vídeo é exibido usando sua largura e altura padrão.
O vídeo é reproduzido automaticamente quando a página é carregada.
O vídeo é reproduzido uma vez (ele não faz loop).
O player exibe o conjunto completo de controles na interface do usuário.
O vídeo é reproduzido em uma janela.

O Jogador do Silverlight

O Silverlight player do Video auxiliar permite reproduzir vídeos do Windows Media (arquivos .wmv ), Windows Media Audio (arquivos .wma ) e MP3 ( arquivos.mp3 ). Você deve definir o parâmetro path para apontar para um pacote de aplicativos baseado em Silverlight (arquivo .xap ). Você também deve definir os parâmetros de largura e altura. Todos os outros parâmetros são opcionais. Quando você usa o player do Silverlight para vídeo, se você definir apenas os parâmetros necessários, o player do Silverlight exibirá o vídeo sem uma cor da tela de fundo.

Observação

Caso você ainda não conheça o Silverlight: o arquivo .xap é um arquivo compactado que contém instruções de layout em um arquivo .xaml , código gerenciado em assemblies e recursos opcionais. Você pode criar um arquivo .xap no Visual Studio como um projeto de aplicativo do Silverlight.

O Silverlight player de vídeo usa as configurações que você fornece para o player e as configurações fornecidas no arquivo .xap .

Dica

Tipos MIME

Quando um navegador baixa um arquivo, o navegador garante que o tipo de arquivo corresponda ao tipo MIME especificado para o documento que está sendo renderizado. O tipo MIME é o tipo de conteúdo ou tipo de mídia de um arquivo. O Video auxiliar usa os seguintes tipos MIME:

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

Reproduzindo vídeos flash (.swf)

Este procedimento mostra como reproduzir um vídeo Flash chamado sample.swf. O procedimento pressupõe que você tenha uma pasta chamada Mídia em seu site e que o arquivo .swf esteja nessa pasta.

Adicione o ASP.NET Biblioteca de Auxiliares da Web ao seu site, conforme descrito em Instalando auxiliares em um site de Páginas da Web do ASP.NET, se você ainda não o adicionou.
No site, adicione uma página e nomeie-a flashVideo.cshtml.

Adicione a seguinte marcação à 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>

Execute a página em um navegador. (Verifique se a página está selecionada no workspace Arquivos antes de executá-la.) A página é exibida e o vídeo é reproduzido automaticamente.

Você pode definir o quality parâmetro para um vídeo Flash como low, autolow, autohigh, medium, highe best:

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

Você pode alterar o vídeo Flash para ser reproduzido em um tamanho específico usando o scale parâmetro , que pode ser definido como o seguinte:

showall. Isso torna o vídeo inteiro visível enquanto mantém a taxa de proporção original. No entanto, você pode acabar com bordas em cada lado.
noorder. Isso dimensiona o vídeo mantendo a taxa de proporção original, mas pode ser cortada.
exactfit. Isso torna todo o vídeo visível sem preservar a taxa de proporção original, mas pode ocorrer distorção.

Se você não especificar um scale parâmetro, o vídeo inteiro ficará visível e a taxa de proporção original será mantida sem nenhum corte. O exemplo a seguir mostra como usar o scale parâmetro :

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

O flash player dá suporte a uma configuração de modo de vídeo chamada windowMode. Você pode definir isso como window, opaquee transparent. Por padrão, o windowMode é definido windowcomo , que exibe o vídeo em uma janela separada na página da Web. A opaque configuração oculta tudo por trás do vídeo na página da Web. A transparent configuração permite que a tela de fundo da página da Web seja exibida por meio do vídeo, supondo que qualquer parte do vídeo seja transparente.

Reproduzindo vídeos do MediaPlayer (.wmv)

O procedimento a seguir mostra como reproduzir um vídeo do Window Media chamado sample.wmv que está na pasta Mídia .

Adicione o ASP.NET Web Helpers Library ao seu site, conforme descrito em Instalando auxiliares em um site de Páginas da Web do ASP.NET, caso ainda não tenha feito isso.
Crie uma nova página chamada MediaPlayerVideo.cshtml.

Adicione a seguinte marcação à 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>

Execute a página em um navegador. O vídeo é carregado e reproduzido automaticamente.

Você pode definir playCount como um inteiro que indica quantas vezes reproduzir o vídeo automaticamente:

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

O uiMode parâmetro permite especificar quais controles aparecem na interface do usuário. Você pode definir uiMode como invisible, none, miniou full. Se você não especificar um uiMode parâmetro, o vídeo será exibido com a janela status, barra de busca, botões de controle e controles de volume, além da janela de vídeo. Esses controles também serão exibidos se você usar o player para reproduzir um arquivo de áudio. Aqui está um exemplo de como usar o uiMode parâmetro :

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

Por padrão, o áudio é ativado quando o vídeo é reproduzido. Você pode ativar o mudo do áudio definindo o mute parâmetro como true:

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

Você pode controlar o nível de áudio do vídeo do MediaPlayer definindo o volume parâmetro como um valor entre 0 e 100. O valor padrão é 50. Veja um exemplo:

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

Reproduzindo vídeos do Silverlight

Este procedimento mostra como reproduzir o vídeo contido em uma página .xap do Silverlight que está em uma pasta chamada Mídia.

Adicione a biblioteca de auxiliares da Web ASP.NET ao seu site, conforme descrito em Instalando auxiliares em um site de Páginas da Web do ASP.NET, caso ainda não tenha feito isso.
Crie uma nova página chamada SilverlightVideo.cshtml.

Adicione a seguinte marcação à 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>