HTML Video
A web page that displays a video uses the HTML <video> element.Â
Example
The HTML < video > Element
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
Video controls, such as play, pause, and volume, are added using the controls attribute.
Including width and height attributes is a good idea at all times. The page may flicker while the video loads if the height and width are not specified.
You can specify other video files that the browser may select by using the <source> element. The first format that the browser recognizes will be used.
Only browsers that do not support the <video> element will display the text that is in between the <video> and </video> tags.
HTML < video > Autoplay
Use the autoplay attribute to have a video play automatically:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Note: Autoplay is typically not supported by Chromium browsers. But autoplay with silent is always permitted.
To have your video play automatically (but silently), add muted after autoplay:
Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Browser Support
The first browser version that fully supports the <video> element is shown by the numbers in the table.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Video Formats
Three video formats are supported: WebM, Ogg, and MP4. The various formats are supported by the following browsers:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - Methods, Properties, and Events
The <video> element’s properties, events, and methods are defined by the HTML DOM.
This lets you adjust the volume and duration of the movie, as well as load, play, and pause it.
Additionally, you can receive notifications through DOM events when a video starts, stops, etc.
Example: Using JavaScript
HTML Video Tags
HTML video
element
video controls
width and height attributes
element
video formats
MP4
WebM
Ogg
autoplay
browser support
video methods
properties
events
HTML DOM
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML “ element is a powerful tool for incorporating video content into your web pages. Whether you’re creating an educational course, a product demo, or an engaging entertainment experience, mastering the “ element is a crucial skill for any web developer.
At the core of the “ element are the `src` attribute, which specifies the video file’s URL, and the `controls` attribute, which adds the default video player controls. You can also set the `width` and `height` attributes to define the video’s dimensions.
But the “ element offers much more than just the basics. You can specify multiple video sources using the “ element, allowing your content to be compatible with a wide range of browsers and their supported video formats, such as MP4, WebM, and Ogg.
Advanced features like the `autoplay` attribute can enhance the user experience, while methods like `play()` and `pause()` give you programmatic control over the video’s playback. Leveraging the rich set of properties, methods, and events available through the HTML DOM can take your video implementation to new heights.
Mastering the “ element is a must-have skill for any web developer looking to create engaging, multimedia-rich content. Dive in and start exploring the full potential of this powerful HTML feature.
Mastering the HTML element is a crucial skill for any web developer. This versatile tag allows you to seamlessly integrate video content into your web pages, elevating the user experience and making your site more engaging.
The element provides a straightforward way to embed video files on your web pages. By specifying the appropriate video source, you can ensure that your content is accessible across a wide range of browsers and devices. Supported video formats include MP4, WebM, and Ogg, giving you the flexibility to cater to different user preferences and device capabilities.
Beyond the basic video playback, the element offers a range of attributes and methods that allow you to fine-tune the video’s appearance and behavior. The width and height attributes let you control the video’s dimensions, while the controls attribute enables the display of the video player’s controls, empowering users to pause, play, and adjust the volume as needed.
Additionally, the element supports various methods, properties, and events that grant you precise control over the video’s functionality. From programmatically triggering playback with the play() method to capturing user interactions through events like play, pause, and ended, you can create dynamic and interactive video experiences that engage your audience.
Mastering the HTML element is a must-have skill for any web developer. By leveraging its capabilities, you can elevate your web projects, captivate your users, and stay ahead of the curve in the ever-evolving world of web development.
The HTML element is a powerful tool for incorporating video content into your web pages. Whether you’re creating an online course, a company website, or a personal blog, mastering the use of HTML video can take your content to the next level.
At the core of the element are the essential attributes that allow you to control the playback and appearance of your video. The “controls” attribute enables the default video player controls, giving your users the ability to play, pause, and adjust the volume. The “width” and “height” attributes allow you to set the dimensions of the video, ensuring it fits seamlessly into your page layout.
