2. Source

The <video> element takes a source attribute (src=""), which accepts a URL (relative or absolute) to a single video file.

It is always recommended you have at least two versions of a video file, and should use the <source> element instead, which is described below.


40% Complete (success)

<video src="#" poster="#" width="..." height="..." preload controls ></video>


You can use multiple source elements, which specifies to the browser that the video is available in multiple formats. This is the <source> element, and again, it is used instead of the src="" attribute of a <video> element.

Note Due to a bug on the iPad, you should provide the MP4 video as the first format.

40% Complete (success)

<video poster="#" width="..." height="..." preload controls>
<source src="#" type="">
<source src="#" type="">


After the source, you’ll notice the type attribute.

Use the type="" attribute to tell the browser what format the video is in. Otherwise, it will download some of the video to see if it can play the file, find that it cannot, and then try the next one until it has exhausted all options or found a valid file format. This takes time and bandwidth!

The codec that was used to encode the video is supplied within the type attribute, following the video file type, separated by a semicolon (;). Here are the types and codecs for the more popular video filetypes:

  • MP4 - type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'
  • WebM -type='video/webm; codecs="vp8.0, vorbis"'
  • OGG - type='video/ogg; codecs="theora, vorbis"'