ASP.NET Custom Server control Youtube player


Recentemente em um de meus projetos eu precisei,mostrar vídeos do youtube em várias páginas da minha aplicação.

Então eu decidi criar um custom server control para isso.É bem simples de fazer e pode ser bem útil quando você precisar mostrar vídeos em vários lugares ou precisar mudar a URL do vídeo dinamicamente.

Crie uma nova Class Library com o nome YouTubeControl ou outro qualquer.Crie uma classe Youtube.cs,que herde de
System.Web.UI.Control:


Próximo passo é adicionar as propriedades da classe (Propriedades do player):

  • URL (seta a URL do vídeo)
  • Height (seta a altura do player)
  • Width (seta a largura do player)
  • AllowFullScreen (opção de tela cheia)

O próximo passo é criar o código “embed” do youtube no método RenderControl:

O método RenderControl irá enviar o stream de saída HTML para o browser.Pra fazer isso vamos criar uma instância da classe HtmlGenericControl,pra armazenar o código embed do youtube e setar todas as propriedades do player:

Nosso controle está pronto,após dar um “build” no projeto,basta adicionar a .dll ao seu projeto agora:

Como usar o controle na sua página:

Clique com o botão direito na ToolBox > Escolha “Add Tab” > De o nome de “Custom Controls” para essa tab > Clique com o direito dentro desta tab > Escolha “Choose Items…” >> No Pop-up que abrir,clique na aba .NET Components >> Clique no botão “Browser…” e busque a pasta do projeto que criamos e encontre sua DLL e clique em OK

Pronto agora basta arrastar o controle para sua página e setar as seguintes configurações para teste:

Você pode inclusive setar as configurações do player via código.

Valeu pessoal até a próxima.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s