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.
![](https://assets.edu.lat/silverlight/images/media_element_app.jpg)
Ora trascina il file video o audio nella superficie di progettazione di Blend.
![](https://assets.edu.lat/silverlight/images/media_element_application.jpg)
Aggiungerà un MediaElement alla superficie e aggiungerà anche una copia del file video nel tuo progetto. Puoi vederlo in Esplora soluzioni.
![](https://assets.edu.lat/silverlight/images/media_element_to_surface.jpg)
Puoi spostarlo, cambiarne le dimensioni, puoi fare cose come applicare una rotazione ecc.
![](https://assets.edu.lat/silverlight/images/rotation.jpg)
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.
![](https://assets.edu.lat/silverlight/images/xaml_generate.jpg)
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.
![](https://assets.edu.lat/silverlight/images/autoplay_generate.jpg)
Quando fai di nuovo clic sulla pagina web, il video verrà messo in pausa.