Apresentar vídeos do YouTube com ASP NET MVC

Há alguns dias atrás me deparei com uma solicitação de um cliente para apresentar vídeos, que já estavam cadastrados no YouTube, em um determinado local do seu site. A solução mais rápida e fácil que cheguei foi adicionar um item object embed no HTML apontando para o endereço do vídeo hospedado no YouTube.

Bom vamos ver como fazer um pequeno exemplo para fica mais claro essa solução.

1. Criando um novo projeto ASP NET MVC

Estarei usando a versão 2.0 do ASP NET MVC, mas essa solução também funcionará com a versão 1.0, então crie um novo projeto ASP NET MVC com o nome de VideosYouTube

2. Criando um novo Controller

Vamos adicionar um novo controller chamado YouTubeController.cs.

3. Criando uma classe Youtube

Vou criar uma classe simples para facilitar o envio das informações para nossa view, dentro da pasta Model adicione uma nova classe com o nome de YouTubeModel.cs, veja abaixo o conteúdo dessa classe.

[sourcecode language=”csharp”]
public class YouTubeModel
{
public string end_imagem { get; set; }

public string end_video { get; set; }
}
[/sourcecode]

4. Recuperando a imagem Thumb

Vamos criar um método privado em nosso controller YouTubeController, que será responsável por recuperar a imagem thumb do vídeo.

[sourcecode language=”csharp”]
private string RecuperarThumb(string enderecoVideo)
{
string[] result = enderecoVideo.Split(‘=’);
string codEmbed = result[1];
return string.Format("http://img.youtube.com/vi/{0}/default.jpg", codEmbed);
}
[/sourcecode]

Veja que estamos usando a imagem default, porém o Youtube disponibiliza mais 3 imagens

http://img.youtube.com/vi/PCKIqkox55w/default.jpg

http://img.youtube.com/vi/PCKIqkox55w/1.jpg

http://img.youtube.com/vi/PCKIqkox55w/2.jpg

http://img.youtube.com/vi/PCKIqkox55w/3.jpg

5. Recuperando o código do vídeo

Vamos criar outro método privado dentro do nosso controller YouTubeController, para retornar o endereço embed do nosso vídeo.

[sourcecode language=”csharp”]
private string RecuperarEmbedVideo(string enderecoVideo)
{
string[] result = enderecoVideo.Split(‘=’);
return result[1];
}
[/sourcecode]

Veja que o endereço embed é um pouco diferente do que o endereço HTTP.

Embed: http://www.youtube.com/v/PCKIqkox55w

HTTP: http://www.youtube.com/watch?v=PCKIqkox55w

6. Listando os vídeos

Vamos criar um novo método private  onde vamos adicionar os vídeos que queremos disponibilizar para visualização. Nesse exemplo estou criando uma lista de vídeos na mão, mas essa lista poderia ser recuperado do banco de dados, ou de um arquivo XML. Veja o código abaixo:

[sourcecode language=”csharp”]
private List<YouTubeModel> RecuperarVideos()
{
// Lista de Videos
List<YouTubeModel> lstVideos = new List<YouTubeModel>();

// video 1
YouTubeModel you1 = new YouTubeModel();
string video1 = "http://www.youtube.com/watch?v=PCKIqkox55w";
you1.end_imagem = this.RecuperarThumb(video1);
you1.end_video = this.RecuperarEmbedVideo(video1);
lstVideos.Add(you1);

// video 2
YouTubeModel you2 = new YouTubeModel();
string video2 = "http://www.youtube.com/watch?v=vgQ59nSoWvc";
you2.end_imagem = this.RecuperarThumb(video2);
you2.end_video = this.RecuperarEmbedVideo(video2);
lstVideos.Add(you2);

// video 3
YouTubeModel you3 = new YouTubeModel();
string video3 = "http://www.youtube.com/watch?v=FGC9MVHoWuE";
you3.end_imagem = this.RecuperarThumb(video3);
you3.end_video = this.RecuperarEmbedVideo(video3);
lstVideos.Add(you3);

return lstVideos;
}
[/sourcecode]

Agora dentro da action Index tempos que chamar o método RecuperarVideos.

[sourcecode language=”csharp”]
public ActionResult Index()
{
// Lista de Videos
List<YouTubeModel> lstVideos = this.RecuperarVideos();

// retornamos para a View a lista de videos
return View(lstVideos);
}
[/sourcecode]

7. Visualizando a lista de vídeos

Agora vamos criar a view que vai mostrar a lista de videos, no controller YouTubeController clique com o botão direito em cima da action Index e adicione uma nova view.

Veja como nossa página ASPX ficou:

[sourcecode language=”html”]
<h2>Vídeos</h2>

<table>

<% foreach (var item in Model) { %>

<tr>
<td>
<a href="/YouTube/Visualizar/<%=Html.Encode(item.end_video)%>">
<img border="0" src="<%=Html.Encode(item.end_imagem)%>" alt="Imagem" />
</a>
</td>
</tr>

<% } %>

</table>
[/sourcecode]

Antes de executar vamos adicionar um novo menu em nossa página, para isso temos que ir em Views -> Shared -> Site.Master e adicione um novo menu, veja abaixo:

[sourcecode language=”html”]
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About", "About", "Home")%></li>
<li><%= Html.ActionLink("YouTube", "Index", "YouTube")%></li>
</ul>
[/sourcecode]

Agora vamos executar para ver o resultado.

8. Selecionando um vídeo

Agora quando o usuário clicar em cima de algum desses vídeos temos que apresentar o vídeo, temos que criar mais uma action em nosso controller YouTubeController chamada Visualizar, onde vamos guardar o ID do video em um ViewData para recuperar na nossa view. Veja o código abaixo.

[sourcecode language=”csharp”]
public ActionResult Visualizar(string id)
{
ViewData["video"] = id;
return View();
}
[/sourcecode]

8. Reproduzir vídeo selecionado

Para reproduzir o vídeo selecionado vamos criar uma nova view, clique com o botão direito em cima da action Visualizar e adicione uma nova view.

Agora o que temos que fazer é recuperar nosso ViewData e mostrar o video como um objeto flash. Veja o código HTML da página Visualizar.

[sourcecode language=”html”]
<object width="580" height="360">
<param name="movie"
value="http://www.youtube.com/v/<%=ViewData["video"]%>?fs=1&amp;hl=pt_BR">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/<%=ViewData["video"]%>?fs=1&amp;hl=pt_BR"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="580"
height="360">
</embed>
</object>
[/sourcecode]

Veja o restultado final:

Download do projeto VideosYouTube

Até a próxima!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.