Silverlight - Vidéo et audio

Dans ce chapitre, nous verrons comment les installations Silverlight lisent la vidéo et l'audio. leMediaElementest le cœur de toute la vidéo et de l'audio dans Silverlight. Cela vous permet d'intégrer l'audio et la vidéo dans votre application. leMediaElement la classe fonctionne de la même manière que Imageclasse. Il vous suffit de le pointer vers le média et il rend l'audio et la vidéo.

La principale différence est que ce sera une image en mouvement, mais si vous la pointez vers le fichier qui ne contient que de l'audio et aucune vidéo comme un MP3, il la lira sans rien afficher à l'écran.

MediaElement comme élément d'interface utilisateur

MediaElementdérive de l'élément framework, qui est la classe de base de tous les éléments de l'interface utilisateur Silverlight. Cela signifie qu'il offre toutes les propriétés standard, vous pouvez donc modifier son opacité, vous pouvez définir le clip, ou le transformer, etc.

Jetons un coup d'œil à un exemple simple de MediaElement.

Ouvrez Microsoft Blend pour Visual Studio et créez un nouveau projet d'application Silverlight.

Maintenant, faites glisser un fichier vidéo ou audio dans la surface de conception Blend.

Il ajoutera un MediaElement à la surface et ajoutera également une copie du fichier vidéo dans votre projet. Vous pouvez le voir dans l'explorateur de solutions.

Vous pouvez le déplacer, changer sa taille, vous pouvez faire des choses comme appliquer une rotation, etc.

Maintenant, il générera le XAML associé pour vous dans MainPage.xaml fichier comme indiqué ci-dessous.

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

Lorsque l'application ci-dessus est compilée et exécutée, vous verrez que la vidéo est en cours de lecture sur votre page Web.

Contrôle

le MediaElementprésente juste les médias. Il n'offre aucun contrôle de lecteur standard. Il commence à jouer automatiquement et s'arrête lorsqu'il atteint la fin, et il n'y a rien qu'un utilisateur puisse faire pour le mettre en pause ou le contrôler. Donc, dans la pratique, la plupart des applications voudront fournir à l'utilisateur un peu plus de contrôle que cela.

Vous pouvez désactiver la lecture automatique en réglant AutoPlay à False. Cela signifie que le lecteur multimédia ne lit rien tant que vous ne le demandez pas.

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

Ainsi, lorsque vous souhaitez lire la vidéo, vous pouvez simplement appeler le MediaElement Play() method. Il propose également des méthodes d'arrêt et de pause.

Regardons à nouveau le même exemple et modifions-le un peu pour permettre un peu de contrôle. Joindre leMouseLeftButtonDown gestionnaire dans MediaElement comme indiqué dans le code XAML ci-dessous.

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

Voici l'implémentation sur le MouseLeftButtonDown gestionnaire d'événement dans lequel il vérifiera que si l'état actuel de l'élément multimédia est plaqué, il mettra la vidéo en pause, sinon il commencera à lire la vidéo.

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(); 
         } 
      } 
   } 
}

Lorsque le code ci-dessus est compilé et exécuté, vous verrez la page Web vierge car nous avons défini le AutoPlay propriété à False. Lorsque vous cliquez sur la page Web, la vidéo démarre.

Lorsque vous cliquez à nouveau sur la page Web, la vidéo est mise en pause.