HTML <video> (Video) Tag
Example
<video width="340" height="260" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Meaning
The <video> element embeds a video into a document.
The attributes (controls, preload, loop) go inside <video> tag to change the behavior of the embedded video.
Browsers that support HTML5 video will play the media without the need for external plugins.
The video formats is made up by a video stream + audio stream.
The three common formats for HTML5 video are: MP4, WebM and OGG Vorbis.
.mp4 = H.264 + AAC .ogg = Theora + Vorbis .webm = VP8 + Vorbis
MIME Types:
Addition to declaring multiple encodings, the web server also needs to be instructed.
See MIME types to find more information about MIME types and Setting up MIME types on your server for more information regarding server setup to deliver HTML5 audio and video content.
What about old browsers?
There are several techniques to ensure that people will be able to access the content we’ve created. Two of them are covered here: Chrome Frame and Flash Fallback.
Chrome Frame:
ChromeFrame is a plugin for Internet Explorer (up to version 8) that will allow the older browsers to work with HTML5 content (not just video and audio) as if it supported the features natively.
Flash fallback:
You can also use flash as a fallback for when the browser does not support any of the provided formats.
Flash supports H264 and Adobe has committed to support the WebM format in their flash player although that time timeline is still not clear.
Note: The biggest drawback using Flash as opposed to the Chrome Frame plugin is that you will get the flash player interface instead of whatever UI you built for your video tag.
Fallback Tip:
<video width="320" height="240" controls="controls" preload="none">
<source src="movie.mp4" type="video/mp4"/>
<source src="movie.ogg" type="video/ogg"/>
<source src="movie.webm" type="video/webm"/>
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240"/>
</object>
</video>Tip: Use <source> element for cross browser support
Browser Compatibility
| Format | Chrome | Edge | Firefox | Safari | Android | AndroidTV | Kodi | Roku |
|---|---|---|---|---|---|---|---|---|
| MP41 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| MKV2, 3 | Yes | Yes | No | N/A | Yes | Yes | Yes | Yes |
| WebM3, 5 | Yes | Yes | Yes | N/A | N/A | N/A | Yes | Yes |
| TS4 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| OGG5 | Yes | Yes | Yes | No | Yes | Yes | Yes | Yes |
Version: HTML5
Standard Syntax
<video>...</video>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| autobuffer | autobuffer | autobuffer attribute specifies the browser should begin buffering a video right away. This attribute should be used if it is assumed the user will play the video. | autoplay |
| autoplay | autoplay | This Boolean attribute specifies that the video will automatically start playing as soon as it can do so without stopping to finish loading the data. |
| autopictureinpicture Experimental |
autopictureinpicture | Specifies that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application. |
| controlslist Experimental |
nodownload nofullscreen noremoteplayback. |
Specified the browser select what controls to show on the media element whenever the browser shows its own set of controls. |
| controls | controls | Specifies the browsers will display controls to allow the user to control video playback, such as play/pause, volume, etc. |
| crossorigin | anonymous use-credentials |
Specifies whether to use CORS to fetch the related video. CORS-enabled resources can be reused in the <canvas> element without being tainted. |
| disablepictureinpicture Experimental |
disablepictureinpicture | Specifies prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases. |
| disableremoteplayback Experimental |
disableremoteplayback | Specifies to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc).In Safari, you can use x-webkit-airplay="deny" as a fallback. |
| height | pixels | Sets the height of the video display area. |
| loop | loop | Specifies that the video will automatically start over again, upon reaching the end. |
| muted | muted | Specifies whether the video will be initially silenced. The default value is false, meaning that the audio will be played when the video is played. |
| playsinline | playsinline | Specifies that the video is to be played "inline", that is within the element's playback area. |
| poster | URL | Specifies an image to be shown while the video is downloading, or until the user hits the play button. If this attribute isn't specified, nothing is displayed until the first frame of the video is available; then the first frame is displayed as the poster. |
| preload | emptyString auto metadata none |
Specifies a hint to the browser about whether to download of the video itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a video, the browser will obviously need to download it. |
| src | URL | Specifies the location of the video file to embed. Alternatively, you can use the preferred <source> tag as it allows for multiple options. |
| width | pixels | specifies the width of the video display area. |
Global Attributes
<video> element also supports the Global Attributes in HTML.
Event Attributes
<video> element also supports the Event Attributes in HTML.
By Default CSS Value(s)
None.