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

[ASP.net教程]基于MediaElement的WPF视频播放器(终章)【3】


一、前言

       对于<MediaElement>前两章介绍了差不多了,其实好的界面还需要UI工程师的配合,比如帮忙设计下按钮的样式等等。同样视频本身也需要吸引人,不然做的再好的播放器也没用。之后,我对代码进行了下小修改,粒子特效那部分就不再放了。

二、代码

      前台代码

 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="600" Width="800" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation ="CenterScreen" Loaded="Window_Loaded"> 10  11   <Window.Resources> 12     <LinearGradientBrush x:Key="SliderBackground" StartPoint="0,0" EndPoint="0,1"> 13       <GradientStop Offset="0.5" Color="#00b3fe"/> 14     </LinearGradientBrush> 15     <LinearGradientBrush x:Key="SliderThumb" StartPoint="0,0" EndPoint="0,1"> 16       <GradientStop Offset="0" Color="#FFD9D3E8"/> 17     </LinearGradientBrush> 18  19     <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton"> 20       <Setter Property="Focusable" Value="false" /> 21       <Setter Property="Height" Value="5"/> 22       <Setter Property="BorderBrush" Value="Transparent"/> 23       <Setter Property="Template"> 24         <Setter.Value> 25           <ControlTemplate TargetType="RepeatButton"> 26             <Border Background="{StaticResource SliderBackground}" /> 27           </ControlTemplate> 28         </Setter.Value> 29       </Setter> 30     </Style> 31  32     <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton"> 33       <Setter Property="Focusable" Value="false" /> 34       <Setter Property="Height" Value="5"/> 35       <Setter Property="BorderBrush" Value="Transparent"/> 36       <Setter Property="Template"> 37         <Setter.Value> 38           <ControlTemplate TargetType="RepeatButton"> 39             <Border Background="Silver" /> 40           </ControlTemplate> 41         </Setter.Value> 42       </Setter> 43     </Style> 44  45     <Style x:Key="Slider_Thumb" TargetType="Thumb"> 46       <Setter Property="Focusable" Value="false" /> 47       <Setter Property="Template"> 48         <Setter.Value> 49           <ControlTemplate TargetType="Thumb"> 50             <Ellipse Name="e" Width="15" Height="15" Fill="White" Stroke="Gray"/> 51           </ControlTemplate> 52         </Setter.Value> 53       </Setter> 54     </Style> 55  56     <Style TargetType="Slider"> 57       <Setter Property="Focusable" Value="false" /> 58       <Setter Property="Template"> 59         <Setter.Value> 60           <ControlTemplate TargetType="Slider"> 61             <Grid> 62               <Border BorderBrush="Red" BorderThickness="0" CornerRadius="0,0,0,0"> 63                 <Track Name="PART_Track"> 64                   <Track.DecreaseRepeatButton> 65                     <RepeatButton Style="{StaticResource Slider_RepeatButton}" Command="Slider.DecreaseLarge"/> 66                   </Track.DecreaseRepeatButton> 67                   <Track.IncreaseRepeatButton> 68                     <RepeatButton Style="{StaticResource Slider_RepeatButton1}" Command="Slider.IncreaseLarge"/> 69                   </Track.IncreaseRepeatButton> 70                   <Track.Thumb> 71                     <Thumb Style="{StaticResource Slider_Thumb}"/> 72                   </Track.Thumb> 73                 </Track> 74               </Border> 75             </Grid> 76           </ControlTemplate> 77         </Setter.Value> 78       </Setter> 79     </Style> 80  81  82     <Style x:Key="Button_Close" TargetType="Button"> 83       <Setter Property="Template"> 84         <Setter.Value> 85           <ControlTemplate> 86             <Image x:Name="IMG" Source="Resources\images\cancel.png"></Image> 87             <ControlTemplate.Triggers> 88               <Trigger Property="IsMouseOver" Value="True"> 89                 <Setter TargetName="IMG" Property="Source" Value="Resources\images\cancel_hover.png"></Setter> 90               </Trigger> 91             </ControlTemplate.Triggers> 92           </ControlTemplate> 93         </Setter.Value> 94       </Setter> 95     </Style> 96  97     <Style x:Key="Button_Left" TargetType="Button"> 98       <Setter Property="Template"> 99         <Setter.Value>100           <ControlTemplate>101             <Image x:Name="IMG" Source="Resources\images\left.png" Stretch="Fill"></Image>102             <ControlTemplate.Triggers>103               <Trigger Property="IsMouseOver" Value="True">104                 <Setter TargetName="IMG" Property="Source" Value="Resources\images\left_hover.png"></Setter>105               </Trigger>106             </ControlTemplate.Triggers>107           </ControlTemplate>108         </Setter.Value>109       </Setter>110     </Style>111 112 113     <Style x:Key="Button_Right" TargetType="Button">114       <Setter Property="Template">115         <Setter.Value>116           <ControlTemplate>117             <Image x:Name="IMG" Source="Resources\images\right.png" Stretch="Fill"></Image>118             <ControlTemplate.Triggers>119               <Trigger Property="IsMouseOver" Value="True">120                 <Setter TargetName="IMG" Property="Source" Value="Resources\images\right_hover.png"></Setter>121               </Trigger>122             </ControlTemplate.Triggers>123           </ControlTemplate>124         </Setter.Value>125       </Setter>126     </Style>127 128   </Window.Resources>129 130   <Grid Name="Main_Grid" MouseLeftButtonDown="Main_Drag">131     <Grid.RowDefinitions>132       <RowDefinition Height="50"></RowDefinition>133       <RowDefinition Height="500"></RowDefinition>134       <RowDefinition Height="50"></RowDefinition>135     </Grid.RowDefinitions>136 137     <Border Name="title_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="0">138       <Grid Name="Title">139         <Grid.ColumnDefinitions>140           <ColumnDefinition Width="200"></ColumnDefinition>141           <ColumnDefinition Width="400"></ColumnDefinition>142           <ColumnDefinition Width="120"></ColumnDefinition>143           <ColumnDefinition Width="80"></ColumnDefinition>144         </Grid.ColumnDefinitions>145 146         <Grid Grid.Column="0">147           <Image Source="Resources\images\logo.png" Stretch="Uniform" Margin="10,0,20,0" ></Image>148         </Grid>149         <Grid Grid.Column="1">150           <Canvas x:Name="ParticleHost" Width="400" >151             <TextBlock Name="txtB_Step" Grid.Column="1" Width="200" Height="30" TextAlignment="Center" FontSize="20" FontFamily="Microsoft YaHei" Margin="100,7,0,0" ToolTip="左键单击视频—播放/暂停"/>152           </Canvas>153         </Grid>154 155         <Button Name="btn_Close" Grid.Column="3" Width="30" Click="Close_Click" Margin="37,10,13,12" HorizontalAlignment="Center" Focusable="False" Style="{StaticResource Button_Close}" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="关闭视频" ToolTipService.InitialShowDelay="1" ToolTipService.Placement="Bottom">156           <Button.RenderTransform>157             <RotateTransform x:Name="trans" Angle="0"/>158           </Button.RenderTransform>159           <Button.Triggers>160             <EventTrigger RoutedEvent="Button.MouseEnter">161               <BeginStoryboard >               162                 <Storyboard>163                   <DoubleAnimation From="0" To="90" Duration="0:0:0.4"164                       Storyboard.TargetName="trans"165                       Storyboard.TargetProperty="Angle"/>166                 </Storyboard>167               </BeginStoryboard>168             </EventTrigger>169           </Button.Triggers>170         </Button>171 172       </Grid>173     </Border>174 175 176     <Grid Name="Movie" Grid.Row="1" MouseEnter="QS_Movie_Enter" MouseLeave="QS_Movie_Leave">177       <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" MouseLeftButtonDown="QS_Movie_MouseLeftButtonDown"/>178       <Button Name="btn_pre" Width="30" Height="40" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click" Focusable="False" Style="{StaticResource Button_Left}"/>179       <Button Name="btn_next" Width="30" Height="40" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click" Focusable="False" Style="{StaticResource Button_Right}"/>180     </Grid>181 182 183     <Border Name="Progress_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="2">184       <Grid Name="Control_Progress" Margin="3,3,-3,-3" >    185         <Grid >186           <Slider Grid.Column="0" Name="timelineSlider" VerticalAlignment="Center" PreviewMouseLeftButtonDown="timelineMDown" PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,6,0,0" Height="18" Margin="49,10,49,16" />187         </Grid>   188       </Grid>189     </Border>190   </Grid>191 </Window>

    

      后台代码依然是老一套,就小修了一下下:

 1 public partial class MainWindow : Window 2   { 3     DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定义一个DT 4     bool play_flag = true; //判断播放状态 5     int play_now = 0;    //判断当前视频索引 6     int play_target; 7     List<string> Play_Video = new List<string>(); 8     List<string> Title_Video = new List<string>(); 9  10  11     public MainWindow() 12     { 13       InitializeComponent(); 14       Play_Video = LoadMovies(); 15       Title_Video = LoadTitles(); 16     } 17  18     private List<string> LoadTitles() 19     { 20       List<string> list_title = new List<string>(); 21       list_title.Add("isBIM 算量简介"); 22       return list_title; 23     } 24     private List<string> LoadMovies() 25     { 26       List<string> Movie_Uri = new List<string>(); 27       Movie_Uri.Add("Resources/videos/QS_Intro.mp4"); 28       return Movie_Uri; 29     } 30  31     private void Play_Click(object sender, RoutedEventArgs e) 32     {      33       QS_Movie.Play();      34     } 35  36     private void Pause_Click(object sender, RoutedEventArgs e) 37     { 38       QS_Movie.Pause();      39     } 40  41     private void Element_MediaOpened(object sender, EventArgs e) 42     { 43       timelineSlider.Maximum = QS_Movie.NaturalDuration.TimeSpan.TotalMilliseconds; //设置slider最大值 44       dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); //超过计时间隔时发生 45       dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 200); //DT间隔 46       dispatcherTimer.Start(); //DT启动  47     } 48  49     private void dispatcherTimer_Tick(object sender, EventArgs e) 50     { 51       int time = (int)QS_Movie.Position.TotalSeconds; 52       timelineSlider.ToolTip = SecToTime(time); 53       timelineSlider.Value = QS_Movie.Position.TotalMilliseconds; //slider滑动值随播放内容位置变化 54     } 55  56     private string SecToTime(int sec) 57     { 58       int min = sec / 60; 59       sec = sec - min * 60; 60       int hour = min / 60; 61       min = min - hour * 60; 62       string h = hour.ToString(); 63       string mm = ((min < 10) ? "0" : "") + min.ToString(); 64       string ss = ((sec < 10) ? "0" : "") + sec.ToString(); 65       string time = h + ":" + mm + ":" + ss; 66       return time; 67     } 68     private void timelineMDown(object sender, EventArgs e) 69     { 70       dispatcherTimer.Stop(); 71     } 72     private void timelineMUp(object sender, EventArgs e) 73     { 74       QS_Movie.Position = new TimeSpan(0, 0, 0, 0, (int)timelineSlider.Value); 75       dispatcherTimer.Start(); 76       QS_Movie.Play(); 77     } 78  79     private void QS_Movie_Loaded(object sender, RoutedEventArgs e) 80     { 81       QS_Movie.Source = new Uri(Play_Video[0], UriKind.Relative); 82       QS_Movie.Play(); 83       txtB_Step.Text = Title_Video[0]; 84     } 85  86     private void Left_Click(object sender, RoutedEventArgs e) 87     { 88         play_target = (play_now + Play_Video.Count-1) % Play_Video.Count; 89         PreLoad(200, play_target); 90         play_now = play_target;  91     } 92  93     private void Right_Click(object sender, RoutedEventArgs e) 94     { 95        play_target = (play_now + 1) % Play_Video.Count; 96        PreLoad(200, play_target); 97        play_now = play_target; 98     } 99 100     private void PreLoad(int interval, int index)101     {102       QS_Movie.Source = new Uri(Play_Video[index],UriKind.Relative);     103       QS_Movie.Play();104       System.Threading.Thread.Sleep(interval);105       QS_Movie.Pause();106       txtB_Step.Text = Title_Video[index];107     }108 109   110     private void QS_Movie_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)111     {112       113       if(play_flag==true)114       {115         QS_Movie.Play();       116       }117       if(play_flag==false)118       {119         QS_Movie.Pause();120       }121       play_flag = !play_flag;122     }123 124     private void Close_Click(object sender, RoutedEventArgs e)125     {126       this.Close();127     }128     private void Main_Drag(object sender, MouseButtonEventArgs e)129     {130       this.DragMove();131     }132 133     private void QS_Movie_Enter(object sender, MouseEventArgs e)134     {135       btn_pre.Visibility = System.Windows.Visibility.Visible;      136       btn_next.Visibility = System.Windows.Visibility.Visible;      137     }138     private void QS_Movie_Leave(object sender, MouseEventArgs e)139     {      140       btn_pre.Visibility = System.Windows.Visibility.Hidden;      141       btn_next.Visibility = System.Windows.Visibility.Hidden;142     }143 }

 

三、效果图

GIF录制工具用的GifCam,一搜就能搜到,就是录不到鼠标??!!