HTML5 Video

Code

HTML5 video can be used to easily embed local or remote video content in a Web page. The browser engine manages streaming, allowing users to immediately start playing the video, and not have to wait for buffering.

This page requires an active network connection.

Files used in this sample: big_buck_bunny_1080p_surround.avi (886Mb), I-15bis.ogg (6.5Mb), bbb_trailer_iphone.m4v (4Mb).

<video height="240px" width="320px" controls="controls" poster="[src of image to display on load]" preload="none" src="[your movie file location]">
    <a href="[link if the browser does not support HTML5]"><img src="[default image for the HTML5 non supported browser]"></a>
</video>

Optional attributes:

  1. height - If present, size the height of the player. Auto detect height if not provided.
  2. width - If present, size the width of the player. Auto detect width if not provided.
  3. controls - If present, controls will be displayed (e.g. play/pause buttons)
  4. poster - If present, display an image on load.
  5. preload=[auto|metadata|none] - Specifies whether or not the video should be loaded when the page loads.
  6. src - location of video file.

Demo

Big Buck Bunny - MP4

Video: H264 - MPEG-4 AVC [part10] [avc1]; Audio: MPEG AAC Audio [mp4a] (Source dimensions: 1280x544)

<video controls preload="none" width="800" height="340">
   <source src='http://mirror.bigbuckbunny.de/peach/bigbuckbunny_movies/big_buck_bunny_1080p_surround.avi' />
   This video format is not supported.
</video>

OGG

Video: Xiph.org's Theora Video [theo]; Audio: Vorbis Audio [vorb] (Source dimensions: 320x240)

<video controls width="320" height="240">
   <source src='http://upload.wikimedia.org/wikipedia/commons/b/b5/I-15bis.ogg' />
   This video format is not supported.
</video>

Big Buck Bunny - M4V

Video: H264 - MPEG-4 AVC [part10] [avc1]; Audio: MPEG AAC Audio [mp4a] (Source dimensions: 480x270)

<video controls width="480" height="270">
   <source src='http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v' />
   This video format is not supported.
</video>

Comments

The video tag is intended to support a common video format, to be implemented for all browsers.
Currently the leading candidate is Ogg Theora. Link: Conversion tool for Ogg Theora.