HTML5 Video and Audio Tag

Perm url with updates: http://xahlee.org/js/html5_video_audio.html

HTML5 Video and Audio Tag

Xah Lee, 2010-11-01

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, usually support some of it. Internet Explorer 9 (in public beta) also support some.

For detail about which browser supports the “video” tag, see: http://www.youtube.com/html5

HTML5 Audio

Here's a audio file embeded using HTML5 audio tag.

Bach's Well-tempered Clavier, Book I, prelude and fugue number 1.

Here's the html source code.

<audio src="i/Bach_WTC1_1_Martha_Goldstein.ogg" controls></audio>

Attributes

AttributePossible ValuesComment
preloadnone,metadata,auto
controlsDoes not take any value
autoplayDoes not take any value
loopDoes 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.

Reference: http://dev.w3.org/html5/spec/Overview.html#audio

HTML5 Video

Here's a embeded html5 video:

Short animation “Sintel” by Blender Institute. Source

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>

Attributes

The attributes are similar to the audio tag, but added are “poster” and “width”, “height”.

Supported Video Formats

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.

References

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs