ASP .NET Core - Exibindo um vídeo com HTML 5

Neste artigo veremos como exibir vídeos a partir do servidor usando HTML 5 na ASP .NET Core.

Com o suporte nativo ao HTML5 o Visual Studio pode usar todos os seus recursos em aplicações Web Forms, ASP .NET MVC e também na ASP .NET Core.

Vejamos um exemplo básico para exibir vídeo em uma página ASP .NET Core MVC.

Recursos :

Visual Studio 2019 Community
.NET Core 3.1

Criando o projeto no VS 2019 Community

Abra o VS 2019 Community e crie uma solução em branco via menu File-> New Project;

Selecione o template ASP .NET Core Web Application, e, Informe o nome AspnCore_Video1;

A seguir selecione .NET Core e ASP .NET Core 3.1 e marque o template Web Application(Model-View-Controller) e clique em Create.

Ao fintal teremos nossa aplicação ASP .NEt Core MVC pronta.

Após criar o projeto vamos criar uma pasta videos dentro da pasta wwwroot e incluir nesta pasta um ou mais arquivos .mp4 que desejamos exibir.

Abaixo temos a pasta videos criada com o arquivo que vou usar como teste neste artigo:

Vamos agora alterar o código do controlador HomeController e da view Index.

Ajustando o controlador e a view

Vamos criar no controlador HomeController um método Action chamado Video que apenas retorna uma view

        public IActionResult Video()
        {
            return View();
        }

A seguir vamos criar a view Video.cshtml :

@{
    ViewData["Title"] = "Vídeo";
}
<h3>@ViewData["Title"]</h3>

<video id="videoplayer"
      src="@Url.Content("~/videos/Blazor_Essencial.mp4")"
      controls="controls"
      width="800" height="700"
 loop />

Aqui estamos usando a tag video do HTML 5 e definindo :

id = o id do controle
src = o caminho do vídeo a ser exibido
controls = definindo a exibição dos controles
width e height = definindo a altura e largura do componente

O atributo <controls> adiciona controles de vídeo, como play, pause e volume.

Também é uma boa ideia sempre incluir os atributos width e height. Se a altura e largura são definidos, o espaço necessário para o vídeo é reservado quando a página é carregada. No entanto, sem esses atributos, o navegador não sabe o tamanho do vídeo, e não pode reservar o espaço adequado para ele. O efeito será que o layout da página vai mudar durante o carregamento (enquanto carrega o vídeo).

Você também deve inserir o conteúdo de texto entre as tags <video> e </video> para navegadores que não suportam o elemento <video>.

O elemento <video> permite vários elementos <source>. Os elementos <source> podem ser vinculados a diferentes arquivos de vídeo. O navegador usará o formato reconhecido na primeira vez.

Antes de exibir vamos ajustar o arquivo _Layout.cshtml da pasta Views/Shared para exibir o link Video:

...

 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
         <ul class="navbar-nav flex-grow-1">
             <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
           </li>
          <li class="nav-item">
              <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Video">Vídeo</a>
          </li>
       </ul>
 </div>
...

Executando o projeto iremos obter:

Esse é uma das alternativas para criar e hospedar uma aplicação Web como um serviço.

Pegue o projeto completo aqui: AspnCore_Video1.zip (sem as referências)

"E, chegando-se Jesus, falou-lhes, dizendo: É-me dado todo o poder no céu e na terra."
Mateus 28:18

Referências:

José Carlos Macoratti