Apresentar vídeos do YouTube com ASP NET MVC
em 13 de setembro de 2010Postado em: ASP NET MVC 2, Google Data API
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.
public string end_imagem { get; set; }
public string end_video { get; set; }
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.
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);
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.
private string RecuperarEmbedVideo(string enderecoVideo)
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:
private List<YouTubeModel> RecuperarVideos()
// Lista de Videos
List<YouTubeModel> lstVideos = new List<YouTubeModel>();
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);
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);
Agora dentro da action Index tempos que chamar o método RecuperarVideos.
List<YouTubeModel> lstVideos = this.RecuperarVideos();
// retornamos para a View a lista de videos
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:
<h2>Vídeos</h2>
<a href="/YouTube/Visualizar/<%=Html.Encode(item.end_video)%>">
<img border="0" src="<%=Html.Encode(item.end_imagem)%>" alt="Imagem" />
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:
<li><%= Html.ActionLink("YouTube", "Index", "YouTube")%></li>
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.
public ActionResult Visualizar(string id)
ViewData["video"] = id;
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.
value="http://www.youtube.com/v/<%=ViewData["video"]%>?fs=1&amp;hl=pt_BR">
<embed src="http://www.youtube.com/v/<%=ViewData["video"]%>?fs=1&amp;hl=pt_BR"
Veja o restultado final:
Download do projeto VideosYouTube
Tags: ASP NET MVC 2, videos, youtube
Postado junho 7, 2012 em 23:21
É muito interessante o seu exemplo. Mas, eu não consegui executar nenhum vídeo. Nem os que já estavam no exemplo e nem os que eu substitui no YouTubeController.cs. Como este recurso é exatamente o que eu preciso, agradeceria muito que você me ajudasse.
Postado junho 9, 2012 em 10:11
Qual o erro? O que acontece quando vc tenta executar? Vc fez o download do projeto?
Postado fevereiro 4, 2013 em 21:22
Baixei e rodei aqui, só precisei trocar os vídeos pois foram removidos. A aplicação funcionou de prima!
Postado fevereiro 4, 2013 em 22:34
como o post é antigo, realmente os videos foram removidos!
Postado fevereiro 11, 2013 em 14:01
Estou em vias de reescrever um CRM que esta em DELPHI 7.0 para outra linguagem. Pesquisei bastante e estou bem inclinado a faze-lo em ASP NET MVC + SQL SERVER (Já uso no DELPHI).
Vi seu material publicado, ja estou na execução. Tem mais algum para indicar antes que eu comece a desenvolver a aplicação?
Postado fevereiro 13, 2013 em 15:13
Jean, uma coisa é fato, vai para o ASP NET MVC
Na própria páginda da Microsoft tem bastante material
Postado julho 1, 2013 em 13:52
Simples e rápido. Parabéns pelo tutorial Leandro. Gostaria de saber se você possui algum sistema de videos como esse que faça o upload dos videos e os armazene localmente. Na verdade preciso desenvolver um sistema de video aulas para a empresa que trabalho. Sistema que rode localmente. Me indica algum material?
Postado agosto 28, 2014 em 13:36
Muito bom seu artigo, parabéns! E no caso dos vídeos do Youtube https://, sabe algum meio de fazer os mesmos funcionarem @Video.flash?