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.
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>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>Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Video element | WHATWG Living Standard | HTML5 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 4+ | Yes 3.5+ | Yes 9+ | Yes 12+ | Yes 4+ | Yes 10.5+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 3.2+ | Yes 10+ | Yes 11+ |
source: caniuse.com
