- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - Video Element
HTML<video> element is used to enable video playback support within a web page.
It works very similarly to the <img> element as it also requires adding the path or URL of the video within the src attribute. The HTML supports only MP4, WebM, and Ogg video formats. The <video> element also supports audio however, the <audio> element is more suitable for that purpose. We will cover the audio element in the next chapter.
Syntax
<video width="450" height="250" controls> <source src="url/of/video" type="video/webm"> </video>
Examples of HTML video Element
Following are some example codes that illustrate the use of video element in a webpage.
Embed a Video in HTML
To embed a video inside a web page, we need to set the src attribute inside the <video> element that specifies the path or URL for video. A web page serves content to a wide variety of users with various types of browsers. Each browser supports different video formats (MP4, WebM, and Ogg) as mentioned earlier. Therefore, we can supply all the formats that HTML supports by including multiple <source> tag within <video> element. We let the browser decide which format is more suitable for video playback.
We can also enable the built-in controls for controlling audio and video playback to the users (if needed) with the help of controls attribute. It provides an interface that enables users to manage video playback functions such as volume adjustment, video navigation (forward and backwards) and play or pause operations.
The following example shows how to insert the path or URL of video inside the video element.
<!DOCTYPE html> <html> <head> <title>HTML Video Element</title> </head> <body> <p>Playing video using video element</p> <p> The browser is responsible for determining the appropriate format to use. </p> <video width="450" height="250" controls> <source src="/html/media/video/sampleTP.webm" type="video/webm"> <source src="/html/media/video/sampleTP.mp4" type="video/mp4"> <source src="/html/media/video/sampleTP.ogv" type="video/ogg"> <p>Sorry, video element is not supported!</p> </video> </body> </html>
Setting the Dimension of Video Display Area
To set the dimension of video display area, also known as the viewport, we can use the height and width attributes of the <video> element. These attributes define the height and width of the video viewport in pixels.
Note that the video will adjust its aspect ratio (e.g. 4:3 and 16:9) to align with the specified height and width. Therefore, it is advisable to match the dimensions of viewport for a better user experience.
Let’s look at an example code below to understand better.
<!DOCTYPE html> <html> <head> <title> HTML Video Element </title> </head> <body> <p>Playing video using video element</p> <video width="450" height="250" controls> <source src="/html/media/video/sampleTP.mp4" type="video/mp4"> </video> </body> </html>
Autoplay and Looping of Video
We can configure the video to play automatically in a loop by using the autoplay and loop attributes. Remember, a few browsers like Chrome 70.0 do not support autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.
The following example illustrates the autoplay and looping of video
<!DOCTYPE html> <html> <head> <title>HTML Video Element</title> </head> <body> <p>Playing video using video element</p> <video width="450" height="250" autoplay muted loop> <source src="/html/media/video/sampleTP.mp4" type="video/mp4"> </video> </body> </html>
Using a Thumbnail for the Video
We can pass a URL of an image that works as a thumbnail for the video within the poster attribute of <video> element. It will display the specified image until the video starts playing.
In the following example, we are illustrating the use of poster attribute
<!DOCTYPE html> <html> <head> <title>HTML Video Element</title> </head> <body> <p>Playing video using video element</p> <video width="450" height="250" controls muted poster ="html/images/logo.png" > <source src="/html/media/video/sampleTP.mp4" type="video/mp4"> </video> </body> </html>
Browser Support for different Video Formats
The table below illustrates the various video formats that are supported by different browsers
Browser | OGG | WebM | MP4 |
---|---|---|---|
Chrome | Yes | Yes | Yes |
Edge | Yes | Yes | Yes |
Safari | No | Yes | Yes |
Firefox | Yes | Yes | Yes |
Opera | Yes | Yes | Yes |