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 in 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 & width : It sets the width and height 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.
Adding Video using HTML5 :
Code Explanation :
- 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 :
To start a video automatically use the autoplay attribute.
Many properties and events can be set for a video like load, play and pause videos, as well as setting duration and volume.
Supported browser: The <audio> tag is supported by below browsers.
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Opera 10.5
- Safari 4.0
- How to add video in HTML5 ?
- HTML5 | rp Tag
- HTML5 | rt Tag
- HTML5 | <aside> Tag
- HTML5 | <meter> Tag
- HTML5 | article tag
- HTML5 | MathML <mn> Tag
- HTML5 | MathML <ms> Tag
- HTML5 | Introduction
- HTML5 | MathML <mi> Tag
- HTML5 | MathML <mo> Tag
- HTML5 | fieldset Tag
- HTML5 | mark Tag
- HTML5 | figcaption Tag
- HTML5 | <ruby> Tag
- HTML5 | figure Tag
- HTML5 | MathML <mtr> Tag
- HTML5 | MathML <mtd> Tag
- HTML5 | <footer> Tag
- HTML5 | MathML <mth> Tag
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : nidhi_biet