Back to: HTML Tutorials
Videos in HTML with Examples
In this article, I am going to discuss Videos in HTML with Examples. Please read our previous article where we discussed Multimedia in HTML with Examples. At the end of this article, you will understand everything about HTML Videos with Examples.
HTML Videos
A video file is a collection of images displayed in a sequence to represent moving scenes. Different video codecs, such as DivX and QuickTime, are often used to encode and decode video files. A video is displayed on a web page using the HTML <video> element.
Syntax: The basic syntax of the <video> element
<video> … </video>
Web browsers commonly support three different formats: mp4, Ogg, and WebM.
Video Controls in HTML
The browser does not display any controls for the video element by default; only the video is displayed.
<video src=”file.mp4″ >
This means that the audio will only play if the video is set on autoplay, and the user is unable to stop, pause, control the volume, or jump to a specific point in the video. Because the control attribute is not defined inside the video element. We can use the controls attribute inside the video element to display the built-in controls.
<video src=”file.mp4″ controls >
Using the HTML5 video Element
The example below simply adds video into an HTML5 document using the browser’s default controls and a single source defined by the src attribute.
<!DOCTYPE html> <html> <style> body{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color:mediumseagreen; } video{ border-radius: 8px; border: 5px solid transparent; } </style> <body> <video width="400" controls> <source src="/parrot.mp4" type="video/mp4"> </video> </body> </html>
Output:
It is always a good practice to include width and height attributes. If the height and width are not specified, the page may flicker while the video is loading.
Video controls, such as play, pause, and volume, are added by the controls attribute. Only browsers that don’t support the <video> element will display the text between the <video> and </video> tags.
HTML <video> Auto play
By default, the video file does not play automatically. We can add auto-play inside the video element to let our video file start playing automatically as the page loads.
<!DOCTYPE html> <html> <style> body{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color: aquamarine; } video{ border-radius: 8px; border: 5px solid transparent; } </style> <body> <video width="600" controls autoplay> <source src="/video.mp4" type="video/mp4"> </video> </body> </html>
Output:
Tag-Specific Attributes
The following table shows the attributes that are specific to the <video> tag.
HTML video- Media Types
Browser Compatibility
The <video> tag is supported in all major modern browsers.
In the next article, I am going to discuss Audio in HTML with examples. Here, in this article, I try to explain Videos in HTML with Examples and I hope you enjoy this Video in HTML with Examples article.