Shell Root
11-03-2009, 07:34 PM
Como ver un video con MediaElement
En este ejemplo veremos de forma sencilla como visualizar un video en una aplicación WPF.
Creamos un WPF Aplication.
http://www.onglasses.net/wwwroot/UpFiles/Usuariosjaviryma/w1.jpg
Una vez creada agregamos el siguiente código.
<MediaElement Height="120" Name="mediaElement1" Width="160" Source="Lake.wmv" LoadedBehavior="Manual" FlowDirection="RightToLeft" Opacity="0.6">
</MediaElement>
Notese que en source se escribe el path del video, también se puede asignar un opacity y la dirección del video.
También se le puede asignar ángulos de inclinación.
<MediaElement.RenderTransform>
<TransformGroup>
<RotateTransform Angle="20">
</RotateTransform>
</TransformGroup>
</MediaElement.RenderTransform>
Y podemos accionarlos con algunos eventos.
void play(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Play();
this.LoadControls();
}
void pause(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Pause();
}
void stop(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Stop();
}
private void CambioVolumen(object sender, RoutedPropertyChangedEventArgs<double> args)
{
this.MediaElement1.Volume = (double)this.sldVolumen.Value;
}
private void CambioVelocidad(object sender, RoutedPropertyChangedEventArgs<double> args)
{
this.MediaElement1.SpeedRatio = (double)this.sldVelocidad.Value;
}
private void Element_MediaEnded(object sender, EventArgs e)
{
this.MediaElement1.Stop();
}
void LoadControls()
{
this.MediaElement1.Volume = (double)this.sldVolumen.Value;
this.MediaElement1.SpeedRatio = (double)this.sldVelocidad.Value;
}
Y en el xaml agregamos un panel para controlar algunas propiedades y acciones del video.
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Image MouseDown="play" Source="play.jpg" />
<Image MouseDown="pause" Source="pause.jpg"/>
<Image MouseDown="stop" Source="stop.jpg" />
<TextBlock Foreground="Black" VerticalAlignment="Center" >Volumen</TextBlock>
<Slider Name="sldVolumen" VerticalAlignment="Center" ValueChanged="CambioVolumen" Value="0.5" Width="50"/>
<TextBlock Foreground="Black" VerticalAlignment="Center">Velocidad</TextBlock>
<Slider Name="sldVelocidad" VerticalAlignment="Center" ValueChanged="CambioVelocidad" Value="1" Width="50" />
</StackPanel>
http://www.onglasses.net/wwwroot/UpFiles/Usuariosjaviryma/w3.jpg
Codigo Completo:
//El código XAML completo
<Window x:Class="Wpf3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="308" Width="563">
<StackPanel>
<MediaElement Height="209" Name="MediaElement1" LoadedBehavior="Manual" Width="193" Source="Lake.wmv" FlowDirection="RightToLeft" Opacity="0.6">
<MediaElement.RenderTransform>
<TransformGroup>
<RotateTransform Angle="20">
</RotateTransform>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Image MouseDown="play" Source="play.jpg" />
<Image MouseDown="pause" Source="pause.jpg"/>
<Image MouseDown="stop" Source="stop.jpg" />
<TextBlock Foreground="Black" VerticalAlignment="Center">Volumen</TextBlock>
<Slider Name="sldVolumen" VerticalAlignment="Center" ValueChanged="CambioVolumen" Value="0.5" Width="50"/>
<TextBlock Foreground="Black" VerticalAlignment="Center">Velocidad</TextBlock>
<Slider Name="sldVelocidad" VerticalAlignment="Center" ValueChanged="CambioVelocidad" Value="1" Width="50" />
</StackPanel>
</StackPanel>
</Window>
Javier Vera
En este ejemplo veremos de forma sencilla como visualizar un video en una aplicación WPF.
Creamos un WPF Aplication.
http://www.onglasses.net/wwwroot/UpFiles/Usuariosjaviryma/w1.jpg
Una vez creada agregamos el siguiente código.
<MediaElement Height="120" Name="mediaElement1" Width="160" Source="Lake.wmv" LoadedBehavior="Manual" FlowDirection="RightToLeft" Opacity="0.6">
</MediaElement>
Notese que en source se escribe el path del video, también se puede asignar un opacity y la dirección del video.
También se le puede asignar ángulos de inclinación.
<MediaElement.RenderTransform>
<TransformGroup>
<RotateTransform Angle="20">
</RotateTransform>
</TransformGroup>
</MediaElement.RenderTransform>
Y podemos accionarlos con algunos eventos.
void play(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Play();
this.LoadControls();
}
void pause(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Pause();
}
void stop(object sender, MouseButtonEventArgs args)
{
this.MediaElement1.Stop();
}
private void CambioVolumen(object sender, RoutedPropertyChangedEventArgs<double> args)
{
this.MediaElement1.Volume = (double)this.sldVolumen.Value;
}
private void CambioVelocidad(object sender, RoutedPropertyChangedEventArgs<double> args)
{
this.MediaElement1.SpeedRatio = (double)this.sldVelocidad.Value;
}
private void Element_MediaEnded(object sender, EventArgs e)
{
this.MediaElement1.Stop();
}
void LoadControls()
{
this.MediaElement1.Volume = (double)this.sldVolumen.Value;
this.MediaElement1.SpeedRatio = (double)this.sldVelocidad.Value;
}
Y en el xaml agregamos un panel para controlar algunas propiedades y acciones del video.
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Image MouseDown="play" Source="play.jpg" />
<Image MouseDown="pause" Source="pause.jpg"/>
<Image MouseDown="stop" Source="stop.jpg" />
<TextBlock Foreground="Black" VerticalAlignment="Center" >Volumen</TextBlock>
<Slider Name="sldVolumen" VerticalAlignment="Center" ValueChanged="CambioVolumen" Value="0.5" Width="50"/>
<TextBlock Foreground="Black" VerticalAlignment="Center">Velocidad</TextBlock>
<Slider Name="sldVelocidad" VerticalAlignment="Center" ValueChanged="CambioVelocidad" Value="1" Width="50" />
</StackPanel>
http://www.onglasses.net/wwwroot/UpFiles/Usuariosjaviryma/w3.jpg
Codigo Completo:
//El código XAML completo
<Window x:Class="Wpf3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="308" Width="563">
<StackPanel>
<MediaElement Height="209" Name="MediaElement1" LoadedBehavior="Manual" Width="193" Source="Lake.wmv" FlowDirection="RightToLeft" Opacity="0.6">
<MediaElement.RenderTransform>
<TransformGroup>
<RotateTransform Angle="20">
</RotateTransform>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Image MouseDown="play" Source="play.jpg" />
<Image MouseDown="pause" Source="pause.jpg"/>
<Image MouseDown="stop" Source="stop.jpg" />
<TextBlock Foreground="Black" VerticalAlignment="Center">Volumen</TextBlock>
<Slider Name="sldVolumen" VerticalAlignment="Center" ValueChanged="CambioVolumen" Value="0.5" Width="50"/>
<TextBlock Foreground="Black" VerticalAlignment="Center">Velocidad</TextBlock>
<Slider Name="sldVelocidad" VerticalAlignment="Center" ValueChanged="CambioVelocidad" Value="1" Width="50" />
</StackPanel>
</StackPanel>
</Window>
Javier Vera