Skip to Main Content
HTML5: Up and Running
book

HTML5: Up and Running

by Mark Pilgrim
August 2010
Intermediate to advanced content levelIntermediate to advanced
222 pages
7h 12m
English
O'Reilly Media, Inc.
Content preview from HTML5: Up and Running

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" ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

HTML5 in Action

HTML5 in Action

Greg Wanish, Rob Crowther, Joe Lennon, Charles Brindle
HTML5 Cookbook

HTML5 Cookbook

Christopher Schmitt, Kyle Simpson
AngularJS

AngularJS

Shyam Seshadri, Brad Green

Publisher Resources

ISBN: 9781449392154Errata Page