你的位置:首页 > ASP.net教程

[ASP.net教程]基于MediaElement的WPF视频播放器(可拖拽进度条播放)


一、前言

      前两天上峰要求做一个软件使用向导,使用WPF制作。这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导。以下是粗设计的原型代码:

二、效果图

 

 

三、代码

       前台代码:

 1 <Window 2     "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3     "http://schemas.microsoft.com/winfx/2006/xaml" 4     "http://schemas.microsoft.com/expression/blend/2008" 5     "http://schemas.open" 6     "clr-namespace:WPF_Nav" 7     "http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" "http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="WPF_Nav.MainWindow" 8     mc:Ignorable="d" 9     Title="MainWindow" Height="480" Width="900" WindowStyle="None">10   <Grid Name="Main_Grid">11     <Grid.RowDefinitions>12       <RowDefinition Height="40"></RowDefinition>13       <RowDefinition Height="343"></RowDefinition>14       <RowDefinition Height="30"></RowDefinition>15       <RowDefinition Height="50"></RowDefinition>16     </Grid.RowDefinitions>17     <Grid Name="Title" Grid.Row="0">18       <Grid.ColumnDefinitions>19         <ColumnDefinition Width="200"></ColumnDefinition>20         <ColumnDefinition Width="500"></ColumnDefinition>21         <ColumnDefinition Width="120"></ColumnDefinition>22         <ColumnDefinition Width="80"></ColumnDefinition>23       </Grid.ColumnDefinitions>24       <Button Grid.Column="3" HorizontalAlignment="Center" Width="40" Height="40" Click="Button_Click" Margin="16,0,0,0" >关闭</Button>25     </Grid>26     <Grid Name="Movie" Grid.Row="1">27       <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></MediaElement>28       <Button Name="LeftButton" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click">上一个</Button>29       <Button Name="RightButton" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click">下一个</Button>30     </Grid>31     <Grid Name="Control_Progress" Grid.Row="2">32       <Slider Height="30" Width="700" Name="timelineSlider" VerticalAlignment="Center" PreviewMouseLeftButtonDown="timelineMDown" PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,5,0,0" ></Slider>33     </Grid>34     <Grid Name="Movie_Control" Grid.Row="3" Margin="0,0,0,0">35       <Grid.ColumnDefinitions>36         <ColumnDefinition Width="200"></ColumnDefinition>37         <ColumnDefinition Width="500"></ColumnDefinition>38         <ColumnDefinition Width="50"></ColumnDefinition>39         <ColumnDefinition Width="150"></ColumnDefinition>40       </Grid.ColumnDefinitions>41       <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">42         <Button Height="40" Width="40" x:Name="Play" Click="Play_Click" Margin="20,0">播放</Button>43         <Button Height="40" Width="40" x:Name="Pause" Click="Pause_Click" Margin="20,0">暂停</Button>44       </StackPanel>45       <Slider Height="25" Width="120" Name="Volunme" Minimum="0" Maximum="1" Value="{Binding ElementName=QS_Movie,Path=Volume,Mode=TwoWay}" Grid.Column="3" HorizontalAlignment="Left" Margin="0,5,0,0" ></Slider>46       <Button Height="25" Width="40" Name="Horn" Grid.Column="2" HorizontalAlignment="Right" Margin="0,13">音量</Button>47     </Grid>48   </Grid>49 </Window>

       

            后台代码:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows; 7 using System.Windows.Controls; 8 using System.Windows.Data; 9 using System.Windows.Documents;10 using System.Windows.Input;11 using System.Windows.Media;12 using System.Windows.Media.Imaging;13 using System.Windows.Navigation;14 using System.Windows.Shapes;15 using System.Windows.Threading;16 17 namespace WPF_Nav18 {19   /// <summary>20   /// MainWindow.xaml 的交互逻辑21   /// </summary>22   public partial class MainWindow : Window23   {24     DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT25     public MainWindow()26     {27       InitializeComponent();28     }29 30     private void Play_Click(object sender, RoutedEventArgs e)31     {     32       QS_Movie.Play();     33     }34 35     private void Pause_Click(object sender, RoutedEventArgs e)36     {37       QS_Movie.Pause();     38     }39 40     private void Element_MediaOpened(object sender, EventArgs e)41     {42       timelineSlider.Maximum = QS_Movie.NaturalDuration.TimeSpan.TotalMilliseconds; //设置slider最大值43       int sec = (int)QS_Movie.NaturalDuration.TimeSpan.TotalSeconds; 44       dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生45       dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500); //DT间隔46       dispatcherTimer.Start(); //DT启动 47     }48 49     private void dispatcherTimer_Tick(object sender, EventArgs e)50     {51       timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化52     }53 54     private void timelineMDown(object sender, EventArgs e)55     {56       dispatcherTimer.Stop();57     }58     private void timelineMUp(object sender, EventArgs e)59     {60       QS_Movie.Position = new TimeSpan(0, 0, 0, 0, (int)timelineSlider.Value);61       dispatcherTimer.Start();62       QS_Movie.Play();63     }64 65     private void QS_Movie_Loaded(object sender, RoutedEventArgs e)66     {67       QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview.mp4");68       QS_Movie.Play();69       System.Threading.Thread.Sleep(500);70       QS_Movie.Pause();71     }72 73     private void Left_Click(object sender, RoutedEventArgs e)74     {75       QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview1.mp4");76       QS_Movie.Play();77       System.Threading.Thread.Sleep(500);78       QS_Movie.Pause();79     }80 81     private void Right_Click(object sender, RoutedEventArgs e)82     {83       QS_Movie.Source = new Uri(@"E:\Test\WPFTest\Sources\preview2.mp4");      84       QS_Movie.Play();85       System.Threading.Thread.Sleep(500);86       QS_Movie.Pause();87     }88 89     private void Button_Click(object sender, RoutedEventArgs e)90     {91       this.Close();92     }93 94    95     96   }97 98 99 }

四、小结

刚玩WPF两天,可能有些地方写的不好望见谅,听江湖传言<MediaElement>可能对Win8不支持,我也不清楚,我是Win7的。所以以上代码仅供参考。

PS:使用向导该怎么做?因为公司软件里的按钮都能按F1直接切到官方文档,还有Tooltips自带小视频演示,我这使用向导思来想去还是用视频的方式呈现,但是组长说做的像个播放器,不像使用向导,我是想把软件每步操作都做成视频左右翻页的,确是是像播放器。这可怎么整?求万能的博友指明一条活路!