【MediaElement】WPF视频播放器【1】

一、前言

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

二、效果图

 

 

三、代码

       前台代码：

 1 <Window
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:WPF_Nav"
 7         xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" xmlns:dxwui="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_Nav
18 {
19     /// <summary>
20     /// MainWindow.xaml 的交互逻辑
21     /// </summary>
22     public partial class MainWindow : Window
23     {
24         DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT
25         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自带小视频演示，我这使用向导思来想去还是用视频的方式呈现，但是组长说做的像个播放器，不像使用向导，我是想把软件每步操作都做成视频左右翻页的，确是是像播放器。这可怎么整？求万能的博友指明一条活路！

 

转载于:https://www.cnblogs.com/lovecsharp094/p/5628287.html