How does the video element work in HTML, and what is it used for?

In the previous post, we talked about the audio element and we introduced some common attributes that make an audio player easier to use.

All these attributes are also supported in the video element.

With the video element, you can add videos to your HTML. The only difference between the video and audio elements is the content they manage. Apart from these, and a small group of attributes unique to the video element, HTML5 media elements share a similar syntax and a common set of attributes.

Here’s an example of using a video element with the loop, controls, and muted attributes:

(click on the image to open in a new tab)

For the source attribute, we are using a video called “ShrimpsForADay1934” from archive.org.

Showing a picture while the video is downloading you just have to use the poster attribute.

Only video elements support this attribute since it’s not available for audio. Let’s see an example:

(click on the image to open in a new tab)

The result is shown below:

Another attribute we could use is the width attribute. With this attribute we can set the width of the video player to our liking.

Let’s set the width of the above video player to 650 pixels.

(click on the image to open in a new tab)

Although my blog doesn’t support comments, feel free to reply via email or X.