Canvas - Introducing HTML5 - page 127

wanted to run a repeating thumbnail of him bashing the banana
across the top of my web site, I could do it by cropping and scal-
ing using the drawImage method.
The components I need are:
• A canvas fi xed across the top of my site
• A hidden video running the synergies video
• A way to loop just the bit of the video I want
• A method to capture what's on the video and transfer it to
the canvas
The reason I'm using a hidden video is because this will be the
source for my canvas, but I don't want it to be seen. I just want
to keep grabbing the video frame and putting it on the canvas.
I just want the part of Bruce smashing the banana with the
mallet, so I need to tell the video just to play that part. There's
no content attribute I can use to tell it to start from a particular
point, I'm just going to force the currentTime to second 49. Then
on the timeupdate event, I'll force the currentTime back to 49 if
it goes above 52 seconds. So my time range is the window of
49 to 52 seconds in the video. Due to some browsers trying to
hold back data and missing support for the video.seekable prop-
erty, for this example I'm going to use a timer to try to force the
start time:
var jumpTimer = setInterval(function () {
try {
// if the data isn't available, setting currentTime
¬ will throw an error
video.currentTime = start;
clearInterval(jumpTimer);
video.play();
} catch (e) {}
}, 100);
video.addEventListener('timeupdate', function () {
if (this.currentTime > 52) this.currentTime = 49;
}, false);
The previous code keeps trying to set the video.currentTime
value, but doing so before the video data is ready throws a
JavaScript error. If the error is thrown, the code doesn't reach
clearInterval . If successful, the setInterval is cleared and the
video is played.