HTML and CSS Reference
In-Depth Information
Fast forward, slow motion, and reverse
The spec provides an attribute,
playbackRate
. By default, the
assumed
playbackRate
is 1, meaning normal playback is at the
intrinsic speed of the media file. Increasing this attribute speeds
up the playback; decreasing it slows it down. Negative values
indicate that the video will play in reverse.
Not all browsers support
playbackRate
yet (only WebKit-based
browsers and IE9 support it right now), so if you need to support
fast forward and rewind, you can hack around this by program-
matically changing
currentTime
:
function speedup(video, direction) {
if (direction == undefined) direction = 1; // or -1 for
¬ reverse
if (video.playbackRate != undefined) {
video.playbackRate = direction == 1 ? 2 : -2;
} else { // do it manually
video.setAttribute('data-playbackRate', setInterval
¬ ((function playbackRate () {
video.currentTime += direction;
return playbackRate; // allows us to run the
¬ function once and setInterval
})(), 500));
}
}
function playnormal(video) {
if (video.playbackRate != undefined) {
video.playbackRate = 1;
} else { // do it manually
clearInterval(video.getAttribute('data-playbackRate'));
}
}
As you can see from the previous example, if
playbackRate
is sup-
ported, you can set positive and negative numbers to control the
direction of playback. In addition to being able to rewind and fast
forward using the
playbackRate
, you can also use a fraction to
play the media back in slow motion using
video.playbackRate
=
0.5
,
which plays at half the normal rate.