The video element
The video element is an element used to put videos into webpages. The video element, similarly to many other elements has many attributes. In this post I’ll be taking a look at some of the attributes that are compatible with the video element.
Src
This attribute is used to link the video that you want to display in the video element. It has no default value, as it needs to be set to some sort of url to actually display the video. the syntax is ‘src=”(link here)”‘. To show how this element is similar to the source tag, the rest of the videos on this site are made with the source tag, which can be used as an alternative to src.
Height and Width
Like most elements, the video element takes in a height and width attribute. The width defaults to 300px and the height defaults to 150px. Unlike some elements, the video element will not take in percent measurements in the width and height attributes, instead only taking in exact pixel measurements. The syntax for both height and width are both ‘height/width=”(numberOfPixels)px”‘
Autoplay
Autoplay is a boolean attribute (true or false value) that makes it so that the video will automatically start playing when you open the website. Although this attribute is technically a boolean attribute, it doesn’t matter what you set it to; as long as it’s present in the video tag it will always be set to true. Due to this fact, the syntax will always just be an ‘autoplay’ in the opening video tag.
Controls
The controls element will make it so that the default controls (as seen in all of the previous videos) will appear and allow the user to interact with the video. It allows the user to control volume, playback, seeking and pause + review. Like the Autoplay attribute, the control element will always apply if it is present in the opening tag of the element. This also means that the syntax will be ‘controls’.
Controlslist
The controlslist attribute allows you to disable certain controls from the controls attribute. This includes nodownload, nofullscreen, noremoteplayback and disablepictureinpicture. The syntax is ‘controlslist=”nofullscreen”‘. It has no default values that are different from the default settings allowed from the browser based on the controls attribute.
Loop
The loop attribute allows the video to play again after it has reached its maximum duration. It will always be true if the element is present in the opening video tag, meaning that the syntax will just be ‘loop’.
Muted
This attribute allows the video to be muted by default by the programmer. The default value is false unless the attribute is placed inside of the video tag, where it will automatically start the video muted. The status of the video’s output sound can still be changed, however. The syntax is ‘muted’.
Poster
This attribute allows you to add a “poster” or more commonly known as a “thumbnail” to the video that will display before the video is played. The syntax is ‘poster=”(your image here)”‘. This attribute has no default value, and will only work if you specify one.