Xah Lee, , …,
This page shows you how to embed video using HTML5's “video” tag.
HTML5 introduced a “video” tag. It allow you to embed a video file without using Flash or other plugins.
Currently it is not yet widely supported by browsers, and the format spec is also not settled. Latest versions of Firefox, Chrome, Safari, Opera, IE 9, all support some of it.
Here's the HTML source code:
<video src="http://upload.wikimedia.org/wikipedia/commons/6/66/Sintel_movie_340x144.ogv" controls width="680" height="288"></video>
Here's how your browser shows it:
As of , it works in Firefox 3.6.12, Chrome 7.0, Opera 10.63. (all on Windows)
Following are optional attributes.
| Attribute | Possible Values | Comment |
|---|---|---|
| preload | none, metadata, auto | ◇ |
| controls | ◇ | Does not take any value |
| autoplay | ◇ | Does not take any value |
| loop | ◇ | Does not take any value |
| width | width in pixels | ◇ |
| height | height in pixels | ◇ |
| poster | ◇ | e.g. … poster="image.jpg" … |
Right now, the supported video formats is not specified. If a browser that support HTML5 video at all, usually the supported video formats are QuickTime, Matroska, Ogg, and the video codec supported are usually: H.264, vp8.
For detail about which browser supports the “video” tag with what video codec, see: YouTube HTML5 Video Player @ http://www.youtube.com/html5.
See: HTML5 Audio Tag.