In this article, we will know HTML5 Video, along with knowing the different ways to add the videos to the HTML page & understanding its implementation through the examples. Before HTML 5 came into existence, videos could only be played in a browser using a plugin like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video on a web page.
There are three different formats that are commonly supported by web browsers – mp4, Ogg, and WebM. The table below lists the formats supported by different browsers:
<video src="" controls> </video>
Attributes that can be used with the “video” tag are listed below :
- Autoplay: It tells the browser to immediately start downloading the video and play it as soon as it can.
- Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
- Loop: It tells the browser to automatically loop the video.
- height: It sets the height of the video in CSS pixels.
- width: It sets the width of the video in CSS pixels.
- Controls: It shows the default video controls like play, pause, volume, etc.
- Muted: It mutes the audio from the video.
- Poster: It loads an image to preview before the loading of the video.
- src: It is used to specify the URL of the video file.
Example: This example illustrates the use of <video> tag where we have used preload attribute whose value is set to auto which specifies the browser should load the entire video when the page loads.
We will understand the various ways to implement the <video> tag, through the examples.
Adding Video using HTML5:
Example: This simple example illustrates the use of the <video> tag in HTML. Here, the controls attribute is used to add controls like play, pause, volume, etc, & the “source” element is used to specify the video that the browser will choose to play.
Autoplaying a Video using HTML5: In order to start a video automatically, we can use the autoplay attribute.
Example: This example illustrates the use of the autoplay attribute in the HTML <video> tag.
Please refer to the How to display video controls in HTML5? article for knowing the various available controls in detail.
- Google Chrome 3 and above
- Internet Explorer 9 and above
- Microsoft Edge 12 and above
- Firefox 3.5 and above
- Opera 10.5 and above
- Safari 3.1 and above