Video

These days videos are a very common feature on different kinds of platforms. Why are they so popular? Firstly, our attention span nowadays is really short, so videos are a great way to pack a lot of information in a short amount of time. They can provide a very different experience for the user and thus enhance 'users' experience'. Finally, let's not forget they can be really entertaining which means they can be used as a great feature to entertain users and make them stay longer on the website. In this lesson, you are going to learn how to put videos on the website. Let's start with the basic syntax.

Basic video syntax

To put the video on your website you will use the video element in the following way:

<video controls src="video.mp4"></video>

You can notice in the snippet above that we used the attributes controls and source. We will cover attributes in the next paragraph. When you open this code in your browser it should look like this:

Notice that there is the frame for the video and the control panel which lets you do the common actions such as play and stop the video, change the volume, and extend the video frame. In the next paragraph, you will learn the most common attributes that are used with the video element.

Video attributes

There are various attributes that can be used with the video element. We are going to cover the most common ones. In the list below you can see them with some comments on their usage:

• controls shows the control panel on the video frame which includes volume, seeking, and pause/resume playback;

• src specifies media source;

• autoplay makes the video automatically play when the website is loaded;

• height sets the height of the video frame;

• width sets the width of the video frame;

• muted mutes the video.

Now that we've learned a few attributes, let's put them into practice. In the example below you will see all the attributes listed above in action:

<h1>This is basic video syntax.</h1>
<video controls src="video.mp4" autoplay width="450px" height="300px" muted></video>

This example shows how to use the MP4 format. In HTML format you can use MP4, WebM, and OGG. In the table below you can see how to write each type:

Each browser supports different kinds of formats. Table below shows which browser supports which format:

Conclusion

In this topic you have learned how to use the video tag to add video files to your website. We discussed the main controls you can use, and also browser compatibility. Now let's put this new knowledge you have into practice!