首页 > 代码库 > Win10系列：VC++媒体播放控制3
Win10系列：VC++媒体播放控制3
（5）添加视频进度条
视频进度条可以用来显示当前视频的播放进度，并可以通过拖动视频进度条来改变视频的播放进度。接下来介绍如何实现视频进度条，首先打开MainPage.xaml文件，并在Grid元素中添加一个名为"VideoSlider"的Slider控件，用来表示一个视频进度条，代码如下所示：
<Slider x:Name="VideoSlider" HorizontalAlignment="Left" Height="40" Margin="114,0,0,0" VerticalAlignment="Top" Width="780" ValueChanged="SliderValueChanged"></Slider>
添加Slider控件以后，接下来将视频进度条和MediaElement控件中的视频进行同步，即当播放MediaElement控件中的视频时，视频进度条的值将跟着改变。为了实现视频进度条和视频的同步，需要用到计时器。打开MainPage.xaml.h头文件，添加如下的代码：
private:
????//声明timer变量
????Windows::UI::Xaml::DispatcherTimer^ timer;
????//声明timeSpan变量
????Windows::Foundation::TimeSpan timeSpan;
在上面的代码中，使用private关键字声明了两个私有的成员变量timer和timeSpan，其中timer是一个DispatcherTimer类型的变量，表示计时器，timeSpan是一个TimeSpan类型的变量，使用timeSpan变量来设置时间间隔。
添加了上述代码以后，接着在MainPage.xaml.cpp源文件中添加如下代码来创建计时器：
MainPage::MainPage()
{
????InitializeComponent();
????//创建计时器
????timer=ref new DispatcherTimer();
????//触发Tick事件调用DispatcherTimerTick函数
????timer->Tick +=ref new EventHandler<Object^>(this,&FileDemo::MainPage::DispatcherTimerTick);
????//设置计时器的时间间隔为1ms
????timeSpan.Duration=10000;
????timer->Interval=timeSpan;
????//启动计时器
????timer->Start();
}
在上面的代码中，首先初始化一个DispatcherTimer类的对象timer，并为timer对象的Tick事件添加事件处理函数DispatcherTimerTick，此函数用来在视频播放时更新视频进度条的值，后面将介绍这个函数的实现代码。然后将timeSpan的Duration属性赋值为10000，并把此对象赋值给timer对象的Interval属性，使timer对象的Tick事件每1毫秒触发一次。最后调用timer对象的Start函数来启动计时器。
创建了计时器以后，接下来在MainPage.xaml.h头文件中添加如下的代码，用来声明DispatcherTimerTick函数。
private:
????//更新视频进度条
????void DispatcherTimerTick(Platform::Object^ sender, Platform::Object^ e);
声明了DispatcherTimerTick函数以后，接着在MainPage.xaml.cpp源文件中添加DispatcherTimerTick函数的实现代码，具体代码如下所示：
//更新视频进度条
void FileDemo::MainPage::DispatcherTimerTick(Object^ sender, Object^ e)
{
????VideoState->Text="播放状态："+Video->CurrentState.ToString();
????//判断视频是否已加载
????if(Video->NaturalDuration.TimeSpan.Duration > 0.0)
????{
????????//将当前视频位置的时间除以视频总的时间，更新VideoSlider的Value属性值
????VideoSlider->Value=http://www.mamicode.com/(100*(Video->Position.Duration)/(Video->NaturalDuration.TimeSpan.Duration));>
????}
}
在上述的代码中，首先使用MediaElement控件中的CurrentState属性得到视频的播放状态，并调用ToString函数将其转换成字符串类型，显示到名为"VideoState"的TextBlock控件中。然后判断视频文件是否已加载到MediaElement控件中，如果视频文件已加载，则通过MediaElement控件中的Position属性来得到视频已经播放的进度时间，并通过NaturalDuration属性得到视频的总时间，接着将视频已经播放的进度时间除以视频的总时间并乘以100，把得到的进度值赋值给名为"VideoSlider"的Slider控件的Value属性表示播放进度的百分比。
添加了DispatcherTimerTick函数的实现代码以后，接下来实现通过拖动视频进度条来改变视频的播放进度的功能。在MainPage.xaml.h头文件中添加如下的代码：
private:
????Windows::Foundation::TimeSpan positionTimeSpan;
private:
????//根据视频进度条改变视频的播放进度
????void SliderValueChanged(Platform::Object^ sender,Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e);
在上述的代码中，使用private关键字声明一个TimeSpan类型的私有成员变量positionTimeSpan，用来表示时间进度。接着使用private关键字声明一个私有的SliderValueChanged函数，此函数用来改变视频的播放进度。
声明了SliderValueChanged函数以后，在MainPage.xaml.cpp源文件中添加SliderValueChanged函数的实现代码，具体代码如下所示：
//根据视频进度条改变视频的播放进度
void FileDemo::MainPage::SliderValueChanged(Object^ sender, Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e)
{
????//当播放时不能改变进度条的值
????if(!Video->CurrentState.ToString()->Equals("Playing"))
????{
????positionTimeSpan.Duration=(e->NewValue)*(Video->NaturalDuration.TimeSpan.Duration)/100;
????????Video->Position=positionTimeSpan;????
????}
}
在上面的代码中，首先使用if语句进行判断，如果MediaElement控件的播放状态不是Playing时，则通过参数e的NewValue属性得到视频进度条更新的值，并通过MediaElement控件的NaturalDuration属性得到视频的总时间，接着将视频进度条更新的值乘上视频的总时间并除以100，将得到的值赋给positionTimeSpan变量的Duration属性。最后将positionTimeSpan变量赋值给MediaElement控件的Position属性。
添加视频进度条之后，前台界面的显示效果如图20-13所示。
图20-13视频进度条
Win10系列：VC++媒体播放控制3