HTML <video> element is used to embed the video/movie with webpage. Previous html versions did not support video files that were played using different plugins but html5 provide support for video file.
HTML Video Tags
| Tag | Description |
| <video> | It defines movie/video. |
| <source> | It allows to define multiple video resources within <video>. |
| <track> | It defines tracks of text in media player. |
<!DOCTYPE html> <html> <body> <video width="400" height="400" controls> <source src="../wp-content/uploads/2021/02/lotus.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
Note: The Webpage can flicker while loading the Video So, it is better to add width and height of video.
Now lets discuss how the above code is working.
Control attribute: The control attribute in video tag defines controls for video such as pause play.
Note: Using source tag multiple formats of video can be added the first recognized format would be used by browser. if any browser will not support <video> than text written between <video> and </video> will be displayed.
HTML Video Formats
Lets discuss few video formats that are widely used and are supported by browsers.
| Format | Extension | Description | Browser Support |
| MP4 | .mp4 | MP4 files are the most popular video format which are supported by all browsers and also recommended by youtube. | Internet Explorer, Chrome, Fire Fox, safari, opera |
| OGG | .ogg | OGG is an open-source file format of video and other multimedia | Supported by all browsers except Internet Explorer and safari |
| WebM | .webm | WebM is also an open-source web video format for creation of high quality videos. | Supported by all browsers except Internet Explorer and safari |
HTML Video Autoplay
Using the autoplay attribute, automatic video replay with webpage loading can be carried out.
<!DOCTYPE html> <html> <body> <video width="400" height="400" autoplay=1> <source src="../wp-content/uploads/2021/02/lotus.mp4" type="video/mp4"> Your browser does not support the video tag. This text will be shown if your browser will not support video tag. </video> </body> </html>
This is how output looks like you can try the above code to understand it clearly.
Note: If your video is in the same folder where the html document is placed than you can simply write the video name with extension in src attribute value.
To learn more about file paths you can visit https://www.tutorialsart.com/html-file-path/.
These were simple HTML video features, java script functions can be added to make it more interactive.