4.7 Video and Scripting—A Simple Video Player 91Listing 4.1 Change and update playback position
var updateProgress = function(ctrl) {
if (ctrl) {
video.currentTime = ctrl.value;
}
else {
curPos.value = video.currentTime;
}
// Setting the time in format MM:SS
mm = Math.floor(video.currentTime / 60.0);
ss = parseInt(video.currentTime) % 60;
ss = (ss < 10)? '0'+ss : ss;
curTime.innerHTML = mm+’:’+ss;
};
The purpose of the if/else block is to find out if updateProgress() was called
with the slider or with ontimeupdate. In the former case, the passed slider object
is assigned to ctrl, and we need to set the playback position to the slider value.
In the latter case, a timeupdate event is present, and we need to set the slider to
the current playback time in the variable curPos.
Now that the playback and controlling the playback position are sorted out, you
have some time to sit back and relax. Take ten minutes off and go explore Big
Buck Bunny with your very own, homemade, and almost finished video player!
4.7.4 Fast Forward and Backward
For these two features, we first need buttons in the HTML document. Their la-
bels will again be Unicode symbols, this time guillemets—angle quotation marks.
The Unicode name describes what they look like: LEFT-POINTING DOUBLE AN-
GLE QUOTATION MARK («) and RIGHT-POINTING DOUBLE ANGLE QUO-
TATION MARK (»). Two event listener attributes start and stop the quick
search, which starts onmousedown and ends onmouseup:
<input type="button"
value="«"
onmousedown="fastFwdBwd(-1)"
onmouseup="fastFwdBwd()">
<input type="button"
value="»"
onmousedown="fastFwdBwd(1)"
onmouseup="fastFwdBwd()">