How HTML5 video element used to embed videos

Last Updated on April 26, 2023 by Roshan Parihar

---

Definition of HTML5 video tag

HTML5 video element is used to show the video as a media resource on a webpage.

---

HTML5 video element is used to embed videos in HTML. Display mp4 videos and other format videos using HTML video element on your webpage.

The HTML source tag is used inside the video tag to give the location of the source.

The HTML video tag is the new standard for the videos inside the web pages. The video tag gives you many controls to play the videos.

video tag is first introduced with the launch of HTML5.

The element first came into existence in 2007 by opera software.

---

---

Syntax

The syntax contains video start and end tag with forward slashes. The source tag located inside the video tag to include the location of the video. Follow the format to the video source you want to use.

Output

---

Source tag to add video location

The source tag uses src attribute to include the source. The source can any allowed video format. You have to provide the location of the source to include.

---

The HTML5 video element control attribute

The control attribute of the HTML video tag used to show play controls. The control and details given below:

• Play/pause button to play or pause the video
• Input forward play button to forward or reverse the video when playing.
• Volume button to increase/decrease the volume of the video.
• Fullscreen button to make the video appear to the whole screen.
• Download button used when you want to download the video.

---

List of allowed HTML Video Formats

Sr. No.	HTML video available formats	Description
1	mp4	mp4 extension is for including mp4 video files.
2	ogg	ogg extension is for including of ogg video files.
3	webm	webm extension is for including webm video files.

---

The video tag as an HTML5 tag

The video tag is a standard HTML5 tag.

---

Element Specific Attribute

Sr. No.	HTML Video Attributes	Description
1	autoplay	Autoplay is the attribute you use when you want your video to play automatically. This will play your video without any need to manually start the video. The value is a boolean given from option true or false.
2	controls	Used to give various controls to the include video files. A user can handle the video content playback, Volume, seeking and pause/resume playback system. the value for this attribute is control
3	height	Height is to give the height to the videos you want to resize. Set the height of the video and define the vertical size with this attribute. A numeric value will be in pixels, percentage etc.
4	loop	Loop the video means replay it again when it gets finished. The value for this attribute is loop.
5	muted	Mute the video when you play it. This makes your video silently. The value for this attribute is muted.
6	poster	Display the image when someone downloading the image. The value for this is valid URL or location of the image
7	preload	Define if the video preloaded or not using the different options. There are three values options – auto, metadata and none. auto is used to play a video file once it gets loaded, none is used to make video file not play automatically, metadata is used to buffer the metadata of video file.
8	src	Used to give the URL of the video resource file. The URL can be full as well as short. A full URL starts with http while the short URL starts from ‘/’. The value for this is a URL or location of the video.
9	width	width is to given to the videos to resize them. Set the width of the video and define the horizontal size with this attribute. A numeric value will be in pixels, percentage etc.

---

How to display controls in HTML video

Control attribute of HTML video is used to display all the controls in videos.

All the controls like start/stop, play/pause, increase/decrease volume and downloads. These all controls are useful when you want to control full features of video.

Output

---

Resources and References

1. W3C Specification
2. HTML living standard
3. W3C project using Github

---