本章讲述MediaElement的简单使用:
WPF 中对于多媒体的支持非常完整,可以使用MediaElement 为应用程序添加媒体播放控件,以完成播放音频、视频功能。MediaElement 属于UIElement,同时也支持鼠标及键盘的操作。
想以交互方式停止、暂停和播放媒体,要将MediaElement 的 LoadedBehavior 属性设置为 Manual 。
界面布局设计
<Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="auto"/></Grid.RowDefinitions><Border BorderThickness="1" BorderBrush="LightBlue" MouseEnter="Border_MouseEnter" MouseLeave="Border_MouseLeave" ><Grid><Image Source="/MediaElement_Demo;component/bgimage.png" Stretch="Fill" /><MediaElement x:Name="mediaElement" Margin="1" LoadedBehavior="Manual" MediaOpened="videoMedia_MediaOpened"></MediaElement><TextBlock x:Name="pathStr" Margin="5 10" FontSize="15" FontWeight="Black" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Foreground="White" Visibility="Collapsed"/></Grid></Border><Grid Grid.Row="1" Margin="0 10 0 20"><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Slider x:Name="slid" Margin="0 0 0 0" Height="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsSnapToTickEnabled="True"
IsMoveToPointEnabled="True" PreviewMouseLeftButtonUp="slid_PreviewMouseLeftButtonUp"></Slider><TextBlock x:Name="playTime" Grid.Row="1" Margin="0 0" HorizontalAlignment="Left" VerticalAlignment="Top"/><TextBlock x:Name="totalTime" Grid.Row="1" Margin="0 0" HorizontalAlignment="Right" TextAlignment="Right" VerticalAlignment="Top"/><StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center"><Button Margin="5 0" Height="30" Width="80" Content="打 开" Click="OpenFileClick"/><Button Margin="5 0" Height="30" Width="80" Content="停 止" Click="StopPlayClick"/><Button Margin="5 0" Height="30" Width="80" Content="快 退" Click="FastBackClick"/><Button x:Name="suspenBtn" Margin="10 0" Height="30" Width="80" Content="暂停" Click="SuspendPlayClick"/><Button Margin="5 0" Height="30" Width="80" Content="快 进" Click="FastBorwardClick"/><Button Margin="5 0" Height="30" Width="80" Content="速度+" Click="SpeedAddClick"/><Button Margin="5 0" Height="30" Width="80" Content="音量+" Click="VolumeAddClick"/></StackPanel></Grid>
</Grid>
布局运行图
打开视频文件,选取视频文件
private void OpenFileClick(object sender, RoutedEventArgs e){OpenFileDialog fileDialog = new OpenFileDialog();fileDialog.Filter = "MP4 File|*.mp4|MP3 File|*.mp3|AVI Files|*.avi";fileDialog.ValidateNames = true;fileDialog.CheckPathExists = true;fileDialog.CheckFileExists = true;if (fileDialog.ShowDialog() == true){this.mediaElement.Stop();this.suspenBtn.Content = "播 放";this.slid.Value = 0;this.playTime.Text = "00:00:00";this.mediaElement.Source = null;this.mediaElement.Position = new TimeSpan(0, 0, 0);this.mediaElement.Close();this.pathStr.Text = "视频地址:" + fileDialog.FileName;this.mediaElement.Source = new Uri(fileDialog.FileName, UriKind.Relative);this.mediaElement.ScrubbingEnabled = true;SuspendPlayClick(null, null);}}
需要获取视频的参数,比如播放时长等,可以使用MediaOpened事件(当完成媒体加载时发生)
private void videoMedia_MediaOpened(object sender, RoutedEventArgs e){this.slid.Maximum = (int)this.mediaElement.NaturalDuration.TimeSpan.TotalSeconds;TotalTime = this.mediaElement.NaturalDuration.TimeSpan;this.totalTime.Text = TotalTime.ToString(@"hh\:mm\:ss");}
播放/暂停
private void SuspendPlayClick(object sender, RoutedEventArgs e){if (this.suspenBtn.Content.ToString() == "播 放"){this.suspenBtn.Content = "暂 停";this.mediaElement.Play();speedTimer.Start();}else{this.suspenBtn.Content = "播 放";this.mediaElement.Pause();speedTimer.Stop();}}
快进
private void FastBorwardClick(object sender, RoutedEventArgs e){if (this.mediaElement != null){this.mediaElement.Position = this.mediaElement.Position + TimeSpan.FromSeconds(10);this.slid.Value = (int)this.mediaElement.Position.TotalSeconds;this.playTime.Text = this.mediaElement.Position.ToString(@"hh\:mm\:ss");}}
快退
private void FastBackClick(object sender, RoutedEventArgs e){if (this.mediaElement != null){this.mediaElement.Position = this.mediaElement.Position - TimeSpan.FromSeconds(10);this.slid.Value = (int)this.mediaElement.Position.TotalSeconds;this.playTime.Text = this.mediaElement.Position.ToString(@"hh\:mm\:ss");}}
停止
private void StopPlayClick(object sender, RoutedEventArgs e){if (this.mediaElement != null){this.mediaElement.Stop();this.suspenBtn.Content = "播 放";this.mediaElement.Position = TimeSpan.FromTicks(1);this.slid.Value = 0; }}
设置媒体的速率,默认值为1,大于1比正常播放快的速率
private void SpeedAddClick(object sender, RoutedEventArgs e)
{ this.mediaElement.SpeedRatio ++;
}
音量设置,在 0 与 1 之间的线性标尺上所表示的媒体音量。 默认值为 0.5
private void VolumeAddClick(object sender, RoutedEventArgs e)
{this.mediaElement.Volume += 0.1;
}
播放滑动条操作,点击滑块上任意区域,视频跳转到指定时间开始播放
private void slid_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e){if (this.mediaElement != null && slid != null){int value = (int)this.slid.Value;TimeSpan span = new TimeSpan(0, 0, value);this.mediaElement.Position = span;this.playTime.Text = this.mediaElement.Position.ToString(@"hh\:mm\:ss");}}
播放滑动条进度值刷新,这里用定时器实现刷新;
DispatcherTimer speedTimer = null;
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{speedTimer = new DispatcherTimer();speedTimer.Interval = TimeSpan.FromSeconds(1);speedTimer.Tick += new EventHandler(speedTimer_tick);
}private void MainWindow_Unloaded(object sender, RoutedEventArgs e)
{speedTimer.Stop();
}
视频地址显示
private void Border_MouseLeave(object sender, MouseEventArgs e)
{this.pathStr.Visibility = Visibility.Collapsed;
}private void Border_MouseEnter(object sender, MouseEventArgs e)
{this.pathStr.Visibility = Visibility.Visible;
}
额外知识点,播放视频旋转
<MediaElement ><MediaElement.LayoutTransform><TransformGroup><RotateTransform Angle="90" /></TransformGroup></MediaElement.LayoutTransform>
</MediaElement>
好了,本章就讲述到这里吧,下一章讲述“使用media player MediaTimeline 来控制播放”