HTML5 Guidelines for Web Developers

170 Chapter 5—Canvas

Figure 5.40 Yosemite National Park video postcard

The video was kindly provided by YouTube user pos315, converted to WebM via

ffmpeg, and reduced to 320 × 240 pixels. You can see the original online at

http://www.youtube.com/watch?v=NmdHx_7b0h0.

Unlike images, which up to now have always found their way into the canvas via

the JavaScript method new Image(), we integrate the panoramic view directly

into the HTML page as a video element. As additional attributes, we need pre-

load, oncanplay as an event listener to give us the point in time when we can lay

out the postcard and prepare for starting and stopping, and a style instruction

for hiding the embedded original video. We only use the original video to copy

the current video frame onto the canvas in brief intervals during playing. The

alternative text for browsers without video support gives a quick reference to the

content of the video:

<video src="videos/yosemite_320x240.webm"

preload="auto"

oncanplay="init(event)"

style="display:none;"

>

NOTE