HTML5 Video Element

One of the most beneficial and popular HTML5 feature is VIDEO ELEMENT. Before discussing more about the VIDEO ELEMENT take a snap of VIDEO ELEMENT history. It is originally purposed by Opera Software in 2007. Before development of VIDEO ELEMENT we were in compulsion to use external plugin to play our video file in the browser. Now it has reduced the external plugin affords.

Browser Support:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element.

Output for video element:

Here is the code for Audio Element:

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

The control attribute adds video controls, like play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

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

Video Formats and Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

MIME Types for Video Formats

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/