Win10系列：VC++媒體播放控制3

標籤：設定   window   分享   range   idt   ural   ges   component   元素   

（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視頻進度條

Win10系列：VC++媒體播放控制3