92 Chapter 4—Video and Audio
The JavaScript callback fastFwdBwb() is rather short and looks like this:var fastFwdBwd = function(direct) {
_pause();
_play();
if (direct) {
video.playbackRate = 5.0 * direct;
}
};Two attributes play an important role in speeding up a video. One of them we
can see in our callback function with video.playbackRate. It represents the cur-
rent playback rate. The second one is video.defaultPlaybackRate, a default value
that determines the film’s normal speed as 1.0. For faster playback, we need to
change the playback rate; for example, 2.0 would mean twice as fast, 4.0 would
be four times as fast, and so on. The number and where applicable the minus
sign determines the direction of playback—positive values fast forward, negative
ones rewind.
According to the definition in the specification, the attribute video.playbackRate
must be set to the value of video.defaultPlaybackRate each time video.play() is
called. So as long as we do not crank up the defaultPlaybackRate, we can be sure
that the original speed applies at each restart. To increase the speed, we therefore
only need to change the video.playbackRate.
This makes the implementation of fastFwdBwd() very easy: The video is first
stopped briefly. Then it is played again, and if 1 or -1 is assigned to the variable
direct, the video.playbackRate is set accordingly and the speed is increased.
The functions _pause() and _play() contain code blocks for starting and stopping
the video, previously found in the callback playPause(). With these functions, we
can now not only control playback and pausing by clicking the Play button, but
also directly via the script. To detach the functionality from the Play button, we
need to define a reference to the button in initControl() via getElementById()
and make it available as variable pButton. The split version of playPause() is
shown in Listing 4.2:Listing 4.2 Starting and stopping the video
var _play = function() {
video.play();
pButton.value = String.fromCharCode('0x25AE','0x25AE');
};
var _pause = function() {
video.pause();
pButton.value = String.fromCharCode('0x25B6');
};