Rendering of the lead character from the open source Blender film Sintel

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>