5.14 Animations 171Panoramic view of Yosemite Valley from Taft Point
To ensure that the function init(event) as a reference in the oncanplay attribute
really exists, we set the script element before our video element. The schemat-
ic structure of this central function, which implements both the layout and the
function of the video postcard, looks like this:
var init = function(evt) {
// save reference to video element
// create background image
image.onload = function() {
// draw background image
// add title
// draw first frame
canvas.onclick = function() {
// implement starting and stopping
// copy video frames while playing
// create icons at regular intervals while playing
};
}
};
The reference to the video object of the video element can be found in evt.tar-
get, and we save it in the variable video. As before, we create a new background
image via new Image(), and as soon as the image is fully loaded, we continue
drawing the background and title. The steps up to this point probably do not re-
quire further explanation, but perhaps we should explain drawing the first frame:
context.setTransform(1,0,0,1,860,20);
context.drawImage(video,0,0,320,240);
context.strokeRect(0,0,320,240);
We first position the coordinate system at the top-right corner with setTrans-
form(), and then draw the first frame with a border using draw-Image(). This
procedure will later be repeated over and over while playing, and it is crucial
that the HTMLVideoElement video of the drawImage() method always offers the
image of the current frame.
Stopping, starting, and then copying the current frames of the original video
running in the background, as well as creating scaled-down image sections, is
implemented via the function canvas.onclick() by clicking on the canvas. List-
ing 5.4 shows the JavaScript code needed to do all that: