Xah Lee, 2010-11-01, 2011-06-24
This page shows you how to embed video or audio using html5's “video” and “audio” tags.
HTML5 introduced a “audio” and “video” tags. They allow you to embed a video or audio file without using Flash or other plugins. However, 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.
For detail about which browser supports the “video” tag with what video codec, see: YouTube HTML5 Video Player @ http://www.youtube.com/html5.
Here's a audio file embeded using HTML5 audio tag.
Bach's Well-tempered Clavier, Book I, prelude and fugue number 1.
This audio works in Firefox 3.6.12, Chrome 7.0, Opera 10.63. (all on Windows)
Here's the html source code.
<audio src="i/Bach_WTC1_1_Martha_Goldstein.ogg" controls></audio>
As of 2011-06-24, it does not work in Safari 5.0.5, IE 9. (probably due to the ogg format.)
| 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 |
Note that “controls”, “autoplay”, “loop” are called “boolean attributes”. They do not take any value. Their existence or non-existence defines a behavior. It is wrong to add a ="true" or ="false" in them.
http://dev.w3.org/html5/spec/Overview.html#audio
Here's a embeded html5 video:
Short animation “Sintel” by Blender Institute. Source
This video works in Firefox 3.6.12, Chrome 7.0, Opera 10.63.
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>
The attributes are similar to the audio tag, but added are “width”, “height”, and “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, see: Intro to Video Streaming and Video Audio Codecs.