Exibindo vídeos com o controle MediaElement no Windows Phone 7

 

O Silverlight permite que você possa incluir arquivos de mídia em sua aplicação seja ela desktop ou em nosso caso para Windows Phone. O suporte a mídia em Silverlight para Windows Phone baseia-se em um pilha nativa do próprio sistema. Sendo assim, as taxas de frames de nossos vídeos não são muito altas, se compararmos com outros dispositivos como pcs.

Para incluir vídeos em suas aplicações WP7, usamos o controle MediaElement. Esse controle, consegue exibir vídeos com uma ótima resolução, para isso precisamos configurar algumas propriedades de largura e altura e Strech desse controle. O modo tela cheia não é suportado no Windows Phone, nesse caso as propriedades de largura e altura são importantes para definirmos o tamanho de exibição de nossa mídia.

 

Para exibir um arquivo de vídeo local faça o seguinte:

  1.  Crie um novo projeto ou abra um já existente no Visual Studio.
  2.  Clique com o botão direito do mouse no nome do seu projeto no Solution Explorer, clique em Add e, em seguida, clique em Existing Item.
  3.  Procure por um arquivo de vídeo existente e clique em Add.
  4. Com o arquivo de vídeo adicionado no projeto de um clique com o botão esquerdo no mouse no video e pressione F4, será exibida a janela de propriedades desse arquivo. Altere a propriedade Build Action , para Content. Essa propriedade informa ao MSBuild, o que fazer com esse arquivo durante o processo de compilação.

Para isso temos duas importantes opções nessa propriedade:

Figura 1. Propriedade Build Action

 

- Content: essa opção inclui o arquivo no pacote de seu projeto porém sem incluí-lo na montagem do projeto.

-Resource: durante o processo de compilação o arquivo de vídeo será incluído no assembly do projeto.

 

Depois de adicionar o vídeo e sua propriedade, abra o arquivo MainPage.xaml localize o grid ContentPanel e adicione o seguinte código:

 

        <!--Os controles estão armazenados nesse grid-->

        <Grid x:Name="ContentPanel" Grid.Row="1">

            <MediaElement

                Height="207"

                HorizontalAlignment="Left"

                Name="mediaElement1"

                VerticalAlignment="Top"

                Width="338"

                Source="Nome do seu video"

                Stretch="Uniform"

                Volume="0.5" />

            <Slider Height="84"

                    HorizontalAlignment="Left"

                    Name="sldTempo"

                    VerticalAlignment="Top"

                    Width="354" />

    <TextBlock Height="30"

                       HorizontalAlignment="Left"

                       Name="txbTempo"

                       Text="tempo"

                       VerticalAlignment="Top" />

 

            <StackPanel Height="86" HorizontalAlignment="Left"

                        Name="stackPanel1" VerticalAlignment="Top"

                        Width="411" Orientation="Horizontal">

                <Button Content="Stop"

Height="72" Name="btnStop"

Width="116" Click="btnStop_Click" />

                <Button Content="Play" Height="72"

Name="btnPlay" Width="116" Click="btnPlay_Click" />

                <Button Content="Pause" Height="72"

Name="btnPause" Width="116" Click="btnPause_Click" />

            </StackPanel>


</Grid>


Perceba que no controle MediaElement foi adicionada a propriedade Strech=”Uniform”; ela é responsável pelo modo de visualização da mídia adicionada. Na imagem abaixo perceba as diferenças:

 

Figura 2. Propriedade Strech.

 

None: A imagem/vídeo mantém seu tamanho original.

Fill: A imagem/vídeo tem um aumento vertical e horizontal, porém pode ficar destorcida, perdendo seu aspecto original.

Uniform: A imagem/vídeo tem um pequeno aumento vertical e horizontal e mantém seu formato original.

UniformeToFill: A imagem/vídeo irá ocupar toda área destinada para sua exibição mantendo seu formato original.

 

Com isso controles que foram adicionados serão exibidos como mostra a imagem a seguir:

 

Figura 3. Visualizando os controles adicionados.

 

Agora adicione os eventos nos controles:

 

private void btnPlay_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Play();

        }

 

        private void btnStop_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Stop();

        }

 

        private void btnPause_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Pause();

        }

 

        private void mediaElement1_MediaOpened(object sender, RoutedEventArgs e)

        {

            sldTempo.Maximum = mediaElement1.NaturalDuration.TimeSpan.TotalSeconds;

        }

 

Como foi adicionado um controle Slider, precisamos então atualizar os valores de intervalo para que você possa ver a duração do vídeo.

Para isso, insira o seguinte código no MainPage():

 

public MainPage()

        {

            InitializeComponent();

 

            System.Windows.Threading.DispatcherTimer Intervalo = new System.Windows.Threading.DispatcherTimer();

            Intervalo.Interval = new TimeSpan(0, 0, 0, 1);

 

            Intervalo.Tick += new EventHandler(Intervalo_Tick);

            Intervalo.Start();

        }

 

Para atualizar a posição do controle Slider e do TextBlock inclua também no código o evento:

 

void Intervalo_Tick(object sender, EventArgs e)

        {

            sldTempo.Value = mediaElement1.Position.Seconds;

    txbTempo.Text = mediaElement1.Position.Seconds.ToString() + " segundos";

 

        }

 

Clique em F5 para compilar e executar o projeto:

 

Figura 4. Projeto compilado

 

Com isso finalizamos nosso exemplo. Para exibir vídeo de algum local da internet, basta que você insira na propriedade Source do controle MediaElement o endereço do arquivo que deseja visualizar.

 

=)

 

Aprofunde seus conhecimentos sobre este tema visitando a comunidade

 

 

Obtenha mais informações sobre o controle MediaElement no portal MSDN

Exibições: 199

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Thiago Oliveira em 10 abril 2011 às 12:14
Obs.: O vídeo demora um "pouco" pra ser exibido no emulador

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço