HTML5 Video

« Previous Next Chapter »

Many modern websites shows videos. HTML5 provides a standard for showing them.

Check if your browser supports HTML5 video



Video on the Web

Until now, there has never been a standard for showing video on a web page.

Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video, with the video element.


Video Formats

Currently, there are 3 supported video formats for the video element:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 No No No 5.0+ 3.0+
WebM No No 10.6+ 6.0+ No
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
  • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec

How It Works

To show a video in HTML5, this is all you need:

<video src="movie.ogg" controls="controls">
</video>

The control attribute is for adding play, pause, and volume controls.

It is also always a good idea to include the width and height attributes.

Insert content between the <video> and </video> tags for browsers that do not support the video element:

Example

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

Try it yourself »

The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.

To make the video work in Safari and future versions of Chrome, we must add a MPEG4 and WebM file.

The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:

Example

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Try it yourself »


Internet Explorer

Internet Explorer 8 does not support the video element. In IE 9, there will be support for video element using MPEG4.


All <video> Attributes

Attribute Value Description
audio muted Defining the default state of the the audio. Currently, only "muted" is allowed
autoplay autoplay If present, then the video will start playing as soon as it is ready
controls controls If present, controls will be displayed, such as a play button
height pixels Sets the height of the video player
loop loop If present, the video will start over again, every time it is finished
poster url Specifies the URL of an image representing the video
preload preload If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present
src url The URL of the video to play
width pixels Sets the width of the video player


« Previous Next Chapter »