Include Multimedia - JavaFX: Developing Rich Internet Applications - page 230

Let's examine the interaction of the progress bar immediately below the video as
shown in Figure 8.5.

Figure 8.5 Video Play and Progress Bar Interaction

This progress bar shows the elapsed percent of the video playback. This is done
by binding the media player's current time to the ProgressBar as illustrated in
Listing 8.7. The percent elapsed time is calculated by dividing the media player's
currentTime by the total duration of the media.

Listing 8.7 MediaPlayer - ProgressBar

content: ProgressBar {
height: 10
width: bind scene.width
percent: bind if (mediaPlayer.media != null and
mediaPlayer.media.duration != null and
mediaPlayer.media.duration.toMillis() > 0 and
mediaPlayer.currentTime.toMillis() > 0)
{

mediaPlayer.currentTime.toMillis() /
mediaPlayer.media.duration.toMillis()
} else {
0.0
};
...
...

The left part of the ProgressBar has a button that rewinds the media by 10 sec-
onds each time it is pressed. This is an action of the ProgressBar called rewind .
Notice that the player must be paused, the currentTime is then set, and play is
resumed. Listing 8.8 is an example of how to implement this.

Listing 8.8 MediaPlayer - Rewind

rewind: function() {
mediaPlayer.pause();
mediaPlayer.rate = 1.0;
mediaPlayer.currentTime =
if(mediaPlayer.currentTime.lt(10s)) {
0s