At Last, the Markup
I’m pretty sure this was supposed to be an HTML book. So where’s the markup?
HTML5 gives you two ways to include video on your
web page. Both of them involve the <video> element. If you only have one
video file, you can simply link to it in a src attribute. This is remarkably similar to
including an image with an <img
src="..."> tag.
<video src="pr6.webm"></video>
Technically, that’s all you need. But just like in an <img> tag, you should always include
width and height attributes in your <video> tags. The width and height attributes can be the same as the maximum
width and height you specified during the encoding process:
<video src="pr6.webm" width="320" height="240"></video>Don’t worry if one dimension of the video is a little smaller than
that. Your browser will center the video inside the box defined by the
<video> tag. It won’t ever be
smooshed or stretched out of proportion.
By default, the <video>
element will not expose any sort of player controls. You can create your
own controls with plain old HTML, CSS,
and JavaScript. The <video>
element has methods like play() and
pause() and a read/write
property called currentTime. There are also read/write
volume and muted properties. So you really have
everything you need to build your own interface.
If you don’t want to build your own interface, you can tell the
browser to display a built-in set of controls. To do this, just include
the controls attribute in your <video> tag:
<video src="pr6.webm" width="320" height="240" ...