<video>
JasonClough2 total contributions
Published Jun 20, 2021Updated Jun 14, 2023
Contribute to Docs
The <video>
element represents an interface for adding video content to the page.
Syntax
<!-- Surrounding source tag --><video><source src="filename.mp4" type="video/mp4" /><h3>Fallback text if video will not play</h3></video><!-- With src attribute --><video src="filename.mp4"><h3>Fallback text if video will not play</h3></video>
The <video>
element may include <source>
elements and fallback text.
Sources are written in preference order, so that the first source listed is played if the browser supports it, with the subsequent sources acting as a fallback. This is usually used to try newer video formats while also providing a fallback for better compatibility.
Attributes
Videos can have various attributes that are added in the opening <video>
tag:
Attribute | Type | Description |
---|---|---|
autoplay |
Boolean | Plays the video automatically once it has loaded. |
controls |
Boolean | Browser offer playback controls to the user. |
loop |
Boolean | Replays the video again once it has finished. |
muted |
Boolean | Ensures there will be no audio output. |
poster |
Provides a thumbnail for the video, specifying an image’s file path. | |
height |
Controls the height dimensions of the video element (in pixels). | |
width |
Controls the width dimensions of the video element (in pixels). | |
src |
Provides the URL for the video that should be shown to the user. |
Attributes can be used together in any order to specify how a video behaves on a webpage.
Examples
The following example shows the <video>
element being used with embedded <source>
element:
<html><head> </head><body><video controls height="480" poster="code_ninja.jpg"><source type="video/webm" src="code_ninja.webm" />Sorry you can't watch this video in your browser. Click<a href="code_ninja.webm">here</a> to download it, instead.</video></body></html>
All contributors
- JasonClough2 total contributions
- BrandonDusch580 total contributions
- Not-Ethan48 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- short_matthew_f33 total contributions
- JasonClough
- BrandonDusch
- Not-Ethan
- christian.dinh
- Anonymous contributor
- short_matthew_f
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.