HTML5 Video

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 auto play, loop, and preload attributes as the <audio> tag. The only difference is that unlike audio, video has a specific size, and those dimensions should be entered as a style, typically (but not exclusively) inline:

<video controls style=“width: 1024px; height: 436px;” >
<source src=“sintel.mp4” type=“video/mpeg” />
<source src=“sintel.ogv” type=“video/ogg” />
</video>

In fact all of CSS, including CSS3 transforms, can be used to style the <video> element.

You can also 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 non-representative of the film as a whole):

<video controls placeholder=“assets/images/altanta-placeholder.jpg”
style=“width: 1024px; height: 436px;” >
<source src=“assets/videos/atlanta.mp4” type=“video/mpeg” />
<source src=“ assets/videos/atlanta.ogg” type=“video/ogg” />
</video>

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>
</object>
</video>

Am I right in thinking that 'player.swf' is something that has to be on the server as well? Suggestions on where that would come from - I've read a little bit about JWPlayer. Could SWFObject also be used, maybe with a JavaScript feature detector to determine if is supported?

posted by Xanthig 7 months ago

Dudley Storey Nope, Xanthing: 'player.swf' is the Flash player itself, installed on the client. We're essentially passing a GET variable to the Flash player in order to play our video.

posted by Dudley Storey 7 months ago

demosthenes.info

featured articles

popular favourites

HTML5 Video

web developer guide

featured comment

what i'm reading

what i'm watching

what i'm playing

what i'm hearing

blogs

podcasts

no ads ever

creative commons licensed