Iā€™m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.


HTML5 Video

html / multimedia

Estimated reading time: 1 minute, 30 seconds

HTML5 video has the same syntax, and the same issues, as the <audio> tag: codec support changes in different browsers, and the need for a fallback solution for browsers that do not support the element, such as IE.

The basic structure is the same; the <video> tag can use the same autoplay, loop, and preload attributes as the <audio> tag. The only difference is that unlike audio, video has a specific size. width and height for the video should be entered with CSS:

<video controls style="width: 50%; height: auto;">
<source src="sintel.mp4" type="video/mpeg">
<source src="sintel.webm" type="video/webm" >

Note that this CSS will make the video responsive, just like a fluid image. In fact all of CSS, including transforms, can be used to style the <video> element.

You can also use the poster attribute to point the <video> tag to an image that acts as a placeholder for the movie (by default, the <video> tag will only show the first frame of the file as its default, which may well be black, or may otherwise misrepresentation of the film as a whole):

<video controls poster="atlanta-placeholder.jpg"  style="width: 50%; height: auto;">
<source src="atlanta.mp4" type="video/mpeg" >
<source src="atlanta.webm" type="video/webm" >

To make the video play in browsers that do not recognize the <video> tag, we use a variation on the Flash technique we used with HTML5 audio, as the Flash Player also recognizes .mp4 files:

<video controls style="width: 1024px; height: 436px;" >
<source src="sintel.mp4" type="video/mpeg">
<source src="sintel.ogv" type="video/ogg" >
<object type="application/x-shockwave-flash" data="player.swf?file=sintel.mp4">
<param name="movie" value="player.swf?file=sintel.mp4">
<a href="sintel.mp4">Download the movie</a>
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.