Silverlight - Vídeo e Áudio

Neste capítulo, veremos como os recursos do Silverlight estão reproduzindo vídeo e áudio. oMediaElementé o coração de todo o vídeo e áudio no Silverlight. Isso permite que você integre áudio e vídeo em seu aplicativo. oMediaElement classe funciona de forma semelhante como Imageclasse. Basta apontá-lo para a mídia e ele renderiza áudio e vídeo.

A principal diferença é que será uma imagem em movimento, mas se você apontar para o arquivo que contém apenas áudio e nenhum vídeo, como um MP3, ele reproduzirá sem mostrar nada na tela.

MediaElement como elemento de interface do usuário

MediaElementderiva do elemento de estrutura, que é a classe base de todos os elementos da interface do usuário do Silverlight. Isso significa que oferece todas as propriedades padrão, então você pode modificar sua opacidade, pode definir o clipe ou transformá-lo e assim.

Vamos dar uma olhada em um exemplo simples de MediaElement.

Abra o Microsoft Blend for Visual Studio e crie um novo projeto de aplicativo Silverlight.

Agora arraste um arquivo de vídeo ou áudio para a superfície de design do Blend.

Ele adicionará um MediaElement à superfície e também adicionará uma cópia do arquivo de vídeo em seu projeto. Você pode ver isso no explorador de soluções.

Você pode movê-lo, alterar seu tamanho, fazer coisas como aplicar uma rotação, etc.

Agora, ele irá gerar o XAML relacionado para você em MainPage.xaml arquivo como mostrado abaixo.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

Quando o aplicativo acima for compilado e executado, você verá que o vídeo está sendo reproduzido em sua página da web.

Controlando

o MediaElementapenas apresenta a mídia. Ele não oferece nenhum controle padrão do player. Ele começa a tocar automaticamente e para quando chega ao final, e não há nada que o usuário possa fazer para pausar ou controlar de outra forma. Portanto, na prática, a maioria dos aplicativos desejará fornecer ao usuário um pouco mais de controle do que isso.

Você pode desativar a reprodução automática configurando AutoPlay para False. Isso significa que o media player não reproduzirá nada até que você peça.

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverlight DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

Então, quando você quiser reproduzir o vídeo, basta chamar o MediaElement Play() method. Ele também oferece métodos de parar e pausar.

Vamos dar uma olhada no mesmo exemplo novamente e modificá-lo um pouco para permitir um pouco de controle. Anexe oMouseLeftButtonDown manipulador em MediaElement conforme mostrado no código XAML abaixo.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

Aqui está a implementação no MouseLeftButtonDown manipulador de eventos no qual verificará se o estado atual do elemento de mídia está em placas, ele pausará o vídeo, caso contrário, começará a reproduzir o vídeo.

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }  
		
      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverlight_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverlight_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

Quando o código acima for compilado e executado, você verá a página da web em branco porque configuramos o AutoPlay propriedade para False. Ao clicar na página da web, o vídeo será iniciado.

Ao clicar na página da web novamente, o vídeo será pausado.