Criando um Web Control para tocar arquivos de áudio e vídeo

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Neste artigo ensino como criar um Web Control Library para tocar arquivos multimídia em uma página ASP.NET

 

Artigo recomendado para Visual Studio 2005

 

Introdução

 

Hoje aprenderemos como criar um Web Control para tocar arquivos multimídia em uma página ASP.NET, eliminando a necessidade de qualquer linha de código depois que o controle estiver pronto.

 

Codificando

 

Para iniciar nosso artigo, abra o Visual Studio.NET 2005 e crie um Novo Projeto > C# > Windows > Web Control Library com o nome de TocaMultimidia. Agora renomeie o arquivo: “WebCustomControl1.cs” para “TocaMultimdia.cs”. Em seguida abra o arquivo e vamos à codificação do mesmo. Veja como ficou o código C# do Web Control [listagem 1]. Para não ter dúvidas, o código está todo comentado:

 

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace TocaMultimidia

{

    [ToolboxData("<{0}:TocaMultimidia runat=server></{0}:TocaMultimidia>")]

    public class TocaMultimidia : WebControl

    {

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue("mini")]

        [Description("Define a forma de exibição do controle: [invisible, none, mini, full]")]

        public string uiMode

        {

            get

            {

                String u = (String)ViewState["uiMode"]; return ((u == null) ? String.Empty : u);

            }

            set

            {

                ViewState["uiMode"] = value;

            }

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue(false)]

        [Description("Define se o clipe tocará uma vez ou infinitamente")]

        public bool Loop

        {

            get

            {

                return ((ViewState["Loop"] == null) ? true : (bool)ViewState["Loop"]);

            }

            set

            {

                ViewState["Loop"] = value;

            }

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue(true)]

        [Description("Define se o clipe tocará assim que carregar")]

        public bool AutoStart

        {

            get

            {

                return ((ViewState["AutoStart"] == null) ? true : (bool)ViewState["AutoStart"]);

            }

            set

            {

                ViewState["AutoStart"] = value;

            }

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue(true)]

        [Description("Envia o status do clipe em execução")]

        public bool SendPlayStateChangeEvents

        {

            get

            {

                return ((ViewState["SendPlayStateChangeEvents"] == null) ? true : (bool)ViewState["SendPlayStateChangeEvents"]);

            }

            set

            {

                ViewState["SendPlayStateChangeEvents"] = value;

            }

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue(true)]

        [Description("Número de vezes que o clipe será tocado")]

        public int PlayCount

        {

            get

            {

                return ((ViewState["PlayCount"] == null) ? 0 : (int)ViewState["PlayCount"]);

            }

            set

            {

                ViewState["PlayCount"] = value;

            }

        }

 

        [Category("Arquivo de Multimídia")]

        [DefaultValue("")]

        [Description("Informe o caminho do clipe de áudio ou vídeo")]

        public string urlMidia

        {

            get

            {

                String s = (String)ViewState["urlMidia"]; return ((s == null) ? String.Empty : s);

            }

            set

            {

                ViewState["urlMidia"] = value;

            }

        }

 

        //Sobreescrevendo o método RenderContents de forma a renderizar o html customizado que precisamos

        protected override void RenderContents(HtmlTextWriter output)

        {

            try

            {

                StringBuilder sb = new StringBuilder();

                sb.AppendFormat("<OBJECT id=\"{0}\" name=\"{0}\" width=\"{1}\" height=\"{2}\"",base.ClientID,base.Width.ToString(),base.Height.ToString());

                  sb.Append(" CLASSID=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\"");

                  sb.Append(" type=\"application/x-oleobject\">");

                sb.AppendFormat(" <PARAM NAME=\"URL\" VALUE=\"{0}\">",urlMidia);

                sb.AppendFormat(" <PARAM NAME=\"SendPlayStateChangeEvents\" VALUE=\"{0}\">",SendPlayStateChangeEvents);

                  sb.AppendFormat(" <PARAM NAME=\"AutoStart\" VALUE=\"{0}\">",AutoStart.ToString());

                sb.AppendFormat(" <PARAM name=\"uiMode\" value=\"{0}\">",uiMode);

                  sb.AppendFormat(" <PARAM name=\"PlayCount\" value=\"{0}\">",PlayCount.ToString());

                sb.AppendFormat(" <PARAM name=\"Loop\" value=\"{0}\">", Loop.ToString());

                sb.Append("</OBJECT>");

 

                output.RenderBeginTag(HtmlTextWriterTag.Div);

                output.Write(sb.ToString());

                output.RenderEndTag();

            }

            catch (Exception ex)

            {

                output.RenderBeginTag(HtmlTextWriterTag.Div);

                output.Write(ex.Message);

                output.RenderEndTag();

            }

        }

    }

}

Listagem 1 – Código C# para gerar o controle

 

 

Entendendo o código

 

No código acima definimos a formação da tag do Web Control, as propriedades do Web Control e no final renderizamos o objeto com suas propriedades usando HTML. Vamos entender o código:

 

1. No código da listagem 2 definimos a tag do Web Control que será exibida no HTML do Web Form:

 

[ToolboxData("<{0}:TocaMultimdia runat=server></{0}:TocaMultimdia >")]

Listagem 2 – Definição da tag do Web Control

 

2. No código abaixo, vemos a definição de um das propriedades do Web Control. Para não alongar demais o artigo, vou explicar somente alguns atributos usados:

 

  • [Category("Arquivo de Multimídia")]: Define a categoria da propriedade. Se colocarmos um nome qualquer e usarmos em todas as propriedades, elas ficaram organizadas no mesmo “box”;
  • [DefaultValue(false)] e Description("Informe o caminho do arquivo de áudio")]: Não precisamos de muita explicação. O primeiro define o valor padrão da propriedade e o segundo a descrição da propriedade;
  • return ((ViewState["FullScreen"] == null) ? true :(bool)ViewState["FullScreen"]):  Na propriedade do controle, salvamos e recuperamos os valores de um ViewState.

 

3. Ao final, sobrescrevemos o método RenderContents para renderizarmos o HTML personalizado com as tag’s do objeto e suas propriedades.

 

Finalizando o projeto do Web Control

 

Altere a compilação de Debug > Release. Compile o novo Web Control e vamos para a próxima etapa.

 

 

Criando um Projeto para testarmos nosso novo Web Control

 

Abra o Visual Studio.NET 2005 e crie um Novo Projeto > C# > ASP.NET Web Application com o nome de TocaMultimidiaTeste:

 

  1. Adicione a referência do novo Web Control ao Toolbox [figura 1 e 2]:

Figura 1

Figura 1 – Adicionando o Web Control ao toolbox

 

Figura 2
Figura 2 – Adicionando a referência do Assembly

 

 

  1. Agora arraste o nosso Web Control (TocaMultimidia) para o Web Form [Figura 3]. Vamos definir as propriedades básicas para fazermos nosso teste [figura 4]:

Figura 3
Figura 3 – Web Control no toolbox

 

Figura 4
Figura 4 – Box com as propriedades do nosso controle

 

Pronto, agora clique com o botão direito em cima do projeto: TocaMultimdiaTeste > Set as StartUp Project. O projeto de teste ficará em negrito [figura 5], rode o exemplo com F5 e bom trabalho!

 

Figura 5
Figura 5 – Solution Explorer com os dois projetos

 

Conclusão

 

Nesse artigo vimos como é simples criar um Web Control para tocar arquivos multimídia, tanto áudio como vídeo, usando o Windows Média Player em uma página ASP.NET.

 

O desenvolvimento de um Web Control é interessante por que não precisamos de uma linha de código para tocar arquivos multimídia. Permite-nos definir qual arquivo multimídia será tocado; Possibilita definir opções e características do Player, inclusive vindo de uma fonte de dados. Abrindo caminho para criarmos bibliotecas de músicas e vídeos, a exemplo do You Tube.

 

Referências:

Código fonte:
[
http://www.i4design.com.br/artigos/TocaMultimidia.zip]

 

 

Fabiano Vitucci Santiago
Analista de Sistemas Web das Faculdades Santo Agostinho e da i4 Design Soluções em Montes Claros - MG, trabalha com Desenvolvimento de aplicativos Web, Windows e Mobile há 7 anos e há 5 se dedica ao estudo e desenvolvimento com a Plataforma .NET.

www.santoagostinho.edu.br / www.i4design.com.br

fabianosan@hotmail.com

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?