Vídeo Player em Silverlight - Visual Studio 2010 Parte I
Vídeo Player em Silverlight
Visual Studio 2010 - Parte I
|
Neste tutorial será mostrado como criar um simples vídeo em Silverlight usando o Visual Studio 2010 Beta 2 ou Visual Studio 2008. As ferramentas de desenvolvimento podem ser baixadas no site da Microsoft. Para desenvolver este exemplo você precisa ter instalado em seu computador: Visual Studio 2010 Beta 2 ou Visual Studio 2008 Caso esteja usando o Visual Studio 2008 é necessário instalar tool Silverlight 3. Você poderá fazer o download em tool. Para o Visual Studio 2010 não é necessário, pois já vem com o Silverlight instalado. Abra o Visual Studio vá ao menu File-> new Project -> Silverlight e escolha Silverlight Application fornece um nome, localização e a linguagem para sua aplicação. Neste exemplo, será usada a linguagem C#. A Figura 01 mostra a tela inicial.
Figura 01 - Tela Inicial
A seguir, uma caixa de dialogo será apresentada. Esta caixa permite escolher o tipo de projeto Web para hospedar o projeto Silverlight e sua versão. A Figura 02 mostra a caixa de diálogo apresentada no Visual Studio.
Figura 02 - Caixa de dialogo do assistente silverlight Deixe as opções padrões e pressione o botão “OK”. Agora é necessário adicionar um vídeo em sua aplicação, clique com o botão sobre a aplicação WEB -> Add -> Existing Item, e adicione um arquivo no formato WMV ou suportado pelo mediaelement. Você pode verificar os diversos formatos na documentação do Silverlight, disponível no site da Microsoft.
A Figura 03 mostra a Solution Explorer contendo a aplicação web e o projeto Silverlight.
Figura 03 - Solution Explorer Agora no arquivo MainPage.Xaml, vamos adicionar o controle mediaelement , o qual permite adicionar áudio e vídeo em nossa aplicação Silverlight. Sendo assim, encontre o mediaelement no painel Toolbox e desenhe na parte de design da MainPage, conforme mostrado na Figura 04.
Figura 04 - Adicionando mediaelement Ao ser desenhado o mediaelement na MainPage, o código XAML é adicionado automaticamente. Sendo assim, o mediaelement foi adicionado estaticamente em nossa aplicação.
Neste exemplo, será utilizado localhost, número da porta da aplicação, seguido pelo nome do arquivo de vídeo. Conforme mostrado na Listagem 01.
Listagem 01 - Endereço do vídeo
A Figura 05 mostra a propriedade source do medialement
Figura 05 - Propriedade Source Para achar o endereço da sua aplicação, você pode executar a aplicação F5, ou pressionar o botão direito sobre a aplicação WEB, Properties -> WEB.
Figura 06 - Resultado obtido Obrigada.
|
