Let’s define the buttons and throw in the function names for the onclick events because you now know what’s what:
<button id=”rewind” title=”reverse” onclick=”changePlaybackSpYou’ll use the HTML entities « and » to mimic the typical symbols you find on such buttons: « and » respectively.
eed(‘-’);” >«</button>
<button id=”ffwd” title=”fast forward” onclick=”changePlaybackSp
eed(‘+’);” >»</button>
There is a caveat though: Currently, only the WebKit-based browsers, Safari and Chrome, support the playbackRate attribute. Therefore, the only way you can sort of mimic the intended functionality on other browsers is to alter the video’s currentTime attribute, moving it either forward or backwards:
function changePlaybackSpeed(direction) {If video.playbackRate is defined, you check the direction parameter passed in—again “-” for back and “+” for forward—and decrease or increase playbackRate accordingly. If the playbackRate is 0, the video is effectively paused and playback stops. Otherwise, you move the video’s currentTime backwards or forward by 1.
if (video.playbackRate != undefined) {
if (direction == “-”) video.playbackRate -= 1;
else video.playbackRate += 1;
}
else {
if (direction == “-”) video.currentTime -= 1;
else video.currentTime += 1;
}
}
TIP: Although Safari and Chrome support the playbackRate attribute, they work in different ways. Both support the incrementing of the parameter to fast forward, but Chrome doesn’t support rewinding. Safari on the other hand actually starts to play the video backwards, right to the start.Your simple but slightly more awesome than it was at the start of the chapter media player now has a full set of rather grey but functional buttons and a working progress bar (Figure 5.7).
With a bit of jiggery pokery with CSS, you can style the player to your taste and achieve what you see in Figure 5.8 or perhaps something better.
Just when you thought you were finished with this simple media player, you’ll make one final addition to increase its awesomeness—progress bar seek functionality.
NOTE: The code for this styled player and for the unstyled player is available on the website at www.html5multimedia.com.
