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=(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视频进度条