How to add a video in HTML

problem

You’re learning HTML and wish to place a video item on your page. In this post we will see how to load and play a video from a local video file and remotely via a URL.

SOLUTION

Using the <video> tag. It has an opening and closing tag.

Inside it we can use nested tags like <source> to specify the source of the video file and the type.

Also on the video tag we can specify via its attributes to show player controls or not. Let’s see a simple example of loading a local mp4 file.

The video file is titled example.mp4.

I will create a directory video example and place the video file inside.

Then I’ll create the video.html file with the following contents.

So the directory will look like this:

In video.html, place the following code

video.html

				
					<!DOCTYPE html>

<body>
	<video controls="true">
  	    <source src="example.mp4" type="video/mp4" />
      	<p>
          	Oops, the browser does not support video
      	</p>
	</video>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/programmerabroad.com\/wp-admin\/admin-ajax.php","nonce":"35577ca491","url":"https:\/\/programmerabroad.com\/how-to-add-a-video-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"lrc":true},"lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

</html>

video.html

				
					<!DOCTYPE html>

<body>
	<video controls="true">
  	    <source src="example.mp4" type="video/mp4" />
      	<p>
          	Oops, the browser does not support video
      	</p>
	</video>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/programmerabroad.com\/wp-admin\/admin-ajax.php","nonce":"35577ca491","url":"https:\/\/programmerabroad.com\/how-to-add-a-video-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"lrc":true},"lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

</html>

output

Note: this video has no audio.

As you can see above, at line 6, the <p> tag is used. That is , if the current browser does not support the video tag, it will show the message “OOps, the browser does not support video”. But nowadays most of the browsers do support it as you can see from the screenshot below and on caniuse website.

I added the attribute controls=”true” so we can see the buttons to click play, pause, adjust the volume, etc.

There are more attributes that can be added and change the tag’s behavior for example the

autoplay attribute (Boolean).

If we set it to true:

video.html

				
						<video controls="true" autoplay="true">

The video will start playing automatically. Note: the user has to approve the autoplay beforehand.

To enable it in Firefox, click on the icon appearing in the address bar as shown below:

Loading from a remote source

All we need to do is to change the src attribute as follows:

video.html

				
					<source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />

output

Note: this video has audio.

We can also add the attribute poster that will show a poster image before the video starts playing.

For example:

video.html

				
					<video controls="true" poster="https://programmerabroad.com/wp-content/uploads/2021/01/free_logo.png">

output

conclusion

In this post we saw how to use the <video> tag in HTML and specify the control, autoplay, poster attributes. Moreover, the tag can handle more than one video type like MP4, WebM and OGG.

References:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

https://caniuse.com/

https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4