Canvas - Introducing HTML5 - page 156

wanted to run a repeating thumbnail of him bashing the banana
across the top of my website, I could do it by drawing a cropped
and scaled version of the video using the drawImage method.
The components I need are:
• A canvas fixed 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 mal-
let (the part from 0:49 to 0:52), so I need to tell the video to play
only that part. There's no content attribute I can use to tell it to
start from a particular point, so I'll just 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 property, for this example I'll 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.