Silverlight - Video e audio

In questo capitolo vedremo come le strutture Silverlight riproducono video e audio. IlMediaElementè il cuore di tutto il video e l'audio in Silverlight. Ciò consente di integrare audio e video nella propria applicazione. IlMediaElement class funziona in modo simile a come Imageclasse. Devi solo puntarlo sul supporto e renderizza audio e video.

La differenza principale è che sarà un'immagine in movimento, ma se la punti al file che contiene solo audio e nessun video come un MP3, lo riprodurrà senza mostrare nulla sullo schermo.

MediaElement come elemento dell'interfaccia utente

MediaElementderiva dall'elemento framework, che è la classe base di tutti gli elementi dell'interfaccia utente di Silverlight. Ciò significa che offre tutte le proprietà standard, quindi puoi modificare la sua opacità, puoi impostare la clip o trasformarla e così via.

Diamo uno sguardo a un semplice esempio di MediaElement.

Apri Microsoft Blend per Visual Studio e crea un nuovo progetto di applicazione Silverlight.

Ora trascina il file video o audio nella superficie di progettazione di Blend.

Aggiungerà un MediaElement alla superficie e aggiungerà anche una copia del file video nel tuo progetto. Puoi vederlo in Esplora soluzioni.

Puoi spostarlo, cambiarne le dimensioni, puoi fare cose come applicare una rotazione ecc.

Ora genererà per te il codice XAML correlato in MainPage.xaml file come mostrato di seguito.

<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 l'applicazione di cui sopra viene compilata ed eseguita, vedrai che il video è in riproduzione sulla tua pagina web.

Controllo

Il MediaElementpresenta solo i media. Non offre controlli del lettore standard. Inizia la riproduzione automaticamente e si ferma quando raggiunge la fine, e non c'è niente che un utente possa fare per metterlo in pausa o controllarlo in altro modo. Quindi, in pratica, la maggior parte delle applicazioni vorrà fornire all'utente un controllo leggermente maggiore di quello.

È possibile disabilitare la riproduzione automatica impostando AutoPlay per False. Ciò significa che il lettore multimediale non riprodurrà nulla finché non lo chiedi.

<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">

Quindi, quando vuoi riprodurre il video, puoi semplicemente chiamare il file MediaElement Play() method. Offre anche metodi di arresto e pausa.

Diamo nuovamente un'occhiata allo stesso esempio e lo modifichiamo un po 'per consentire un po' di controllo. Allega il fileMouseLeftButtonDown gestore in MediaElement come mostrato nel codice XAML di seguito.

<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>

Ecco l'implementazione su MouseLeftButtonDown gestore di eventi in cui controllerà che se lo stato corrente dell'elemento multimediale è in placcatura, metterà in pausa il video altrimenti inizierà la riproduzione del video.

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 il codice sopra è stato compilato ed eseguito, vedrai la pagina web vuota perché abbiamo impostato l'estensione AutoPlay proprietà a False. Quando fai clic sulla pagina web, inizierà il video.

Quando fai di nuovo clic sulla pagina web, il video verrà messo in pausa.