How to Insert Video in HTML

#webdev #html #beginners #tutorial

In this article, we'll learn which tag we use to create a video element in HTML, as well as the attributes that define how the video will behave.

Now, revealing the secret, to add videos to an HTML document, you need to use the video tag. First, we create the video tag and then add the controls attribute to display a playback control.

<video width="640" height="360" controls>

</video>

Next, we add the <source> tag with the path to the video file.

An interesting detail: we can also add more than one file with a different extension as a security measure, HTML will consider the first supported file.

In this case, we'll add a file with the .mp4 extension. If the file isn't supported or has a problem, HTML will consider the next supported file.

Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.

<video width="640" height="360" controls>
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser does not support the video tag
</video>

The video files supported by the browser are:

MP4
OGG
WebM

We also use the type attribute in the <source> tag to inform the browser of the file type being used, it's a good way to maintain semantic HTML.

This will be the result:

Video Tag Attributes

In addition to the controls attribute, we can include other attributes in the <video> tag:

muted specifies that the video is muted
loop specifies that the video plays in a loop
autoplay specifies that the video plays automatically
poster displays an image while the video is loading or until the user presses play

<video width="640" height="360" controls poster="./img/play.jpg">
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser doesn't support the video tag
</video>