HTML5 – video tag

HTML5 video tag (<video>) can be used to play a vide in HTML page. Here are some examples of video tag using webm and mp4 video files as source. When multiple sources are specified, browser uses the first recognized format.

html5-video-tag

Video tag attributes

Attribute Value Description
src url The source of the resource
crossorigin anonymous|use-credential How the element handles crossorigin requests
poster url Poster frame to show prior to video playback
preload none|metadata|auto Hints how much buffering the media resource will likely need
autoplay boolean (present or not) Start media automatically on load
mediagroup text Groups media elements together
loop boolean (present or not) Whether to loop
muted boolean (present or not) Whether to mute the media resource by default
controls boolean (present or not) Show user agent controls
width length|percentage Horizontal dimension
height length|percentage Horizontal dimension

Browser support for various formats

  • Mp4 (Mpeg4) (Broadly supported by Chrome, Firefox, IE, Edge, Safari, Opera)
  • Webm (Broadly supported by Chrome, Firefox, Opera)
  • Ogg (Broadly supported by Chrome, Firefox, Opera)

Example – Video tag with controls

The video will autoplay in loop and will be mute. User will see controls (start, stop, etc) on the video.

<style type="text/css" media="screen">
  video {border: 2px solid lightgreen;}
</style>
<div>
  <div>The video (mute, autoplay, loop) with controls</div>
  <video height="200" autoplay muted loop controls>
    <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.webm" type="video/webp">
    <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.mp4" type="video/mp4">
  </video>
</div>
refresh

Example – Video tag without controls

This is suitable for video background. User will not see controls. The video will autoplay in loop and will be mute.

<style type="text/css" media="screen">
  video {border: 2px solid lightgreen;}
</style>
<div>
  <div>The video (mute, autoplay, loop) without controls</div>
  <video height="200" autoplay muted loop>
    <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.webm" type="video/webp">
    <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.mp4" type="video/mp4">
  </video>
</div>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
Video elementWHATWG Living StandardHTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 3.5+ Yes 9+ Yes 12+ Yes 4+ Yes 10.5+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 10+ Yes 11+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments