Before HTML 5 came into existence, videos could only be played in a browser using a plug in 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.
The table below specifies the first version of each web browser that fully supported the “video” tag :
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 :
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.