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 :
Browser MP4 WebM OGG Google Chrome Yes Yes Yes Internet Explorer Yes No No Firefox Yes Yes Yes Opera Yes Yes Yes Safari Yes Yes No
<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