WIN10 Series: VC + + Media playback control 3

(5) Add video progress bar

The video progress bar can be used to display the current video playback progress, and you can drag the video progress bar to change the video playback progress. Next, how to implement the video progress bar, first open the MainPage.xaml file, and add a slider control named "Videoslider" in the grid element to represent a video progress bar, the code is as follows:

<slider x:name= "Videoslider" horizontalalignment= "left" height= "" margin= "114,0,0,0" verticalalignment= "Top" Width= "780" valuechanged= "slidervaluechanged" ></Slider>

After adding a slider control, you will then synchronize the video progress bar with the video in the MediaElement control, that is, when you play the video in the MediaElement control, the value of the video progress bar changes accordingly. In order to achieve the video progress bar and video synchronization, need to use a timer. Open the Mainpage.xaml.h header file and add the following code:

Private

???? declaring a timer variable

???? Windows::ui::xaml::D ispatchertimer^ timer;

???? declaring a timeSpan variable

???? Windows::foundation::timespan TimeSpan;

In the above code, the private keyword is used to declare two member variables of the timer and timespan, where the timer is a variable of type DispatcherTimer, which represents a timer, a timespan is a variable of type TimeSpan, Use the timespan variable to set the time interval.

After adding the above code, add the following code in the MainPage.xaml.cpp source file to create the timer:

Mainpage::mainpage ()

{

???? InitializeComponent ();

???? Create a timer

???? Timer=ref new DispatcherTimer ();

???? trigger Tick event call dispatchertimertick function

???? Timer->tick +=ref New Eventhandler<object^> (this,&filedemo::mainpage::D ispatchertimertick);

???? Set the timer interval to 1ms

???? timespan.duration=10000;

???? timer->interval=timespan;

???? Start Timer

???? Timer->start ();

}

In the above code, first initialize an object timer for the DispatcherTimer class and add an event handler function Dispatchertimertick for the timer object's tick event, which is used to update the value of the video progress bar when the video is playing. The implementation code for this function is described later. The Duration property of the timespan is then assigned a value of 10000, and the object is assigned to the interval property of the timer object, so that the timer object's tick event is triggered every 1 milliseconds. Finally, call the Timer object's start function to start the timer.

After you have created the timer, next add the following code to the Mainpage.xaml.h header file to declare the Dispatchertimertick function.

Private

???? Update Video progress bar

???? void Dispatchertimertick (platform::object^ sender, platform::object^ e);

After declaring the Dispatchertimertick function, add the implementation code for the Dispatchertimertick function in the MainPage.xaml.cpp source file, as shown in the following code:

// Update Video progress bar

void Filedemo::mainpage::D ispatchertimertick (object^ sender, object^ e)

{

???? videostate->text= " playback Status:" +video->currentstate.tostring ();

???? Determine if the video is loaded

???? if (Video->naturalduration.timespan.duration > 0.0)

???? {

???????? changes the time of the current video position by the total time of the video, updating The value of the videoslider Property

???? Videoslider->value= (100* (video->position.duration)/(video->naturalduration.timespan.duration));

????}

}

In the preceding code, you first use the CurrentState property in the MediaElement control to get the video playback state, and call the ToString function to convert it to a string type, which is displayed in a TextBlock control named "Videostate". Then determine if the video file is loaded into the MediaElement control, and if the video file is loaded, get the progress time that the video has been playing through the position property in the MediaElement control. The total time of the video is obtained through the naturalduration attribute, then the progress time of the video is divided by the total time of the video and multiplied by 100, and the resulting progress value is assigned to the Value property of the slider control named "Videoslider" as a percentage of the playback progress.

After you add the implementation code for the Dispatchertimertick function, you can then implement the ability to change the playback progress of the video by dragging the video progress bar. Add the following code to the Mainpage.xaml.h header file:

Private

???? Windows::foundation::timespan Positiontimespan;

Private

???? Change the video playback progress based on the video progress bar

???? void Slidervaluechanged (platform::object^ sender,windows::ui::xaml::controls::P rimitives:: rangebasevaluechangedeventargs^ e);

In the code above, declare a TimeSpan type Private member variable positiontimespan using the Private keyword to represent the time progress. It then uses the Private keyword to declare a private slidervaluechanged function, which is used to change the playback progress of the video.

After declaring the Slidervaluechanged function, add the implementation code for the Slidervaluechanged function in the MainPage.xaml.cpp source file, as shown in the following code:

// change the video playback progress based on the video progress bar

void Filedemo::mainpage::slidervaluechanged (object^ sender, Windows::ui::xaml::controls::P rimitives:: rangebasevaluechangedeventargs^ e)

{

???? The value of the progress bar cannot be changed while playing

???? if (! Video->currentstate.tostring ()->equals ("Playing"))

???? {

???? positiontimespan.duration= (E->newvalue) * (video->naturalduration.timespan.duration)/100;

???????? video->position=positiontimespan;????

????}

}

In the above code, first use the IF statement to judge, if the MediaElement control's playback state is not playing, then through the parameter E NewValue property to get the video progress bar update value, The total time of the video is obtained through the Naturalduration property of the MediaElement control, then the value of the video progress bar is multiplied by the total time of the video and divided by 100, and the resulting value is assigned to the duration attribute of the Positiontimespan variable. Finally, assign the Positiontimespan variable to the position property of the MediaElement control.

After adding the video progress bar, the foreground interface displays 20-13 of the results shown.

Figure 20-13 Video progress bar

WIN10 Series: VC + + Media playback control 3