HTML and CSS Reference
In-Depth Information
Figure 5-4. When selecting which size video you want to embed, YouTube offers static illustrations
that lack context
Solution
In this Sample Design, we use
canvas
(see
Chapter 9
) to create a better and more
contextual preview of what video may look like at different sizes (see
Figure 5-5
).
Add <video> and <canvas>
To start, reuse the markup used in this chapter for
video
, and add a
button
to trigger
the drawing, as well as two
canvas
elements: one for a medium preview and one for a
small one.
To each element, assign a unique
id
:
<video
id="origVideo"
width="640" height="360">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Your device does not support HTML5 video.
</video>
<button title="Generate Preview" onclick="generatePreview();">Generate
Preview</button>
<canvas
id="previewMed"
></canvas>
<canvas
id="previewSm"
></canvas>
