MathCurvesSurfacesWallpaper GroupsGallerySoftwarePOV-Ray
ProgramingLinuxPerl PythonHTMLCSSJavaScriptPHPJavaLang DesignEmacsUnicode ♥

HTML5 Video Example

, , …,

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.

HTML5 Video

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:

Short animation “Sintel” by Blender Institute. img src

As of , it works in Firefox 3.6.12, Chrome 7.0, Opera 10.63. (all on Windows). As of , it works in Firefox and Chrome on Linux.

If you have multiple video formats, you can use the “source” tag. Example:

<video controls>
  <source src="mymovie.ogg" type="video/ogg">
  <source src="mymovie.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

HTML5 Video Tag Attributes

Following are optional attributes.

AttributePossible ValuesComment
preloadnone, metadata, auto
controlsDoes not take any value
autoplayDoes not take any value
loopDoes not take any value
widthwidth in pixels
heightheight in pixels
poster… poster="image.jpg" …

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 about which browser supports the “video” tag with what video codec, see: YouTube HTML5 Video Player @ http://www.youtube.com/html5.

HTML5 Audio

See: HTML5 Audio Tag.

Reference

blog comments powered by Disqus