How to Use the HTML Video Tag

The modern standard for displaying videos in a web browser is to use the HTML video tag. With it we can supply multiple video sources for different video qualities, displaying built-in video controls and control the behaviour of the video such as looping and autoplay.

 

In this tutorial, we will learn how to use the HTML video tag with examples.

 

The Video Tag Syntax

Here is the basic usage of the HTML video tag:

 

<video height="360" width="640">
	<source src="https://filesamples.com/samples/video/mp4/sample_1280x720.mp4" type="video/mp4">
	Error: please upgrade your browser to display videos.
</video>

 

The first step is to supply a height and width to display the video at in the browser window using the height="" and width="" attributes on the video tag. 

 

Inside the video tag provide a source tag, which will contain the source of the video file inside the src="" attribute and the format the video is in inside the type="" attribute. The format for video types should be video/ followed by name of the format. For MP4 this would be video/mp4.

 

Optionally you can supply some text inside the video tag that will display if the user's browser does not support video elements.

 

Supported Video Formats

There are three formats of video that are supported by popular web browsers; MP4, WebM and OGG. Here is a table showing which formats the 5 main browsers support:

 

BrowserMP4WebMOGG
Chromeyesyesyes
Firefoxyesyesyes
Safariyesyesno
Edgeyesyesyes
Operayesyesyes

 

The only thing you need to watch out for is that Safari does not support OGG files.

 

Adding Browser Controls

The first example we looked at requires a third-party JavaScript player to allow the user to play the video. Two good free JavaScript video players that use HTML video tags are Plyr and Video,js

 

You can alternatively use the built-in browser video controls instead by supplying the controls attribute, which will save you having to install anything extra to display videos.

 

<video height="360" width="640" controls>
	<source src="https://filesamples.com/samples/video/mp4/sample_1280x720.mp4" type="video/mp4">
	Error: please upgrade your browser to display videos.
</video>

 

Now your video will have basic controls such as play/pause, full screen and volume level:

 

Video controls

 

Adding a Custom Poster

Sometimes you will want to show a custom poster that will display as a placeholder before the user clicks play. This can be done by supplying the poster="" attribute containing the URL of the image to use.

 

<video height="360" width="600" controls poster="https://filesamples.com/samples/image/jpg/sample_1920%C3%971280.jpg">
	<source src="https://filesamples.com/samples/video/mp4/sample_1280x720.mp4" type="video/mp4">
	Error: please upgrade your browser to display videos.
</video>

 

Video poster

 

Add Multiple Video Sources

Add each video source in a new source tag.

 

<video height="360" width="600" controls poster="https://filesamples.com/samples/image/jpg/sample_1920%C3%971280.jpg">
	<source src="https://filesamples.com/samples/video/mp4/sample_1920x1080.mp4" type="video/mp4">
	<source src="https://filesamples.com/samples/video/mp4/sample_1280x720.mp4" type="video/mp4">
	<source src="https://filesamples.com/samples/video/mp4/sample_640x360.mp4" type="video/mp4">
	Error: please upgrade your browser to display videos.
</video>

 

note – to offer the user the ability to change the quality of the video playback you will need to use a third-party player.

 

Automatically Play the Video

To have the video automatically play on page load, add the autoplay attribute.

 

<video height="360" width="640" controls autoplay>
	<source src="https://filesamples.com/samples/video/mp4/sample_1280x720.mp4" type="video/mp4">
	Error: please upgrade your browser to display videos.
</video>

 

All the Video Tag Attributes

Here are all the optional video tag attributes and what they do:

 

AttributeValueDescription
controlscontrolsUse the browsers built-in video controls.
autoplayautoplayStart the video playback immediately on page load.
heightpixelsThe height of the video player in pixels.
widthpixelsThe width of the video play in pixels.
looploopThe video will loop from the beginning infinitely until stopped by the user.
mutedmutedMute the audio by default.
posterURLA poster image to display until the video playback begins
preload

auto

metadata

none

Controls whether the video is downloaded on page load or when the user clicks play.
srcURLSet the URL of the video file to use.

 

Conclusion

You now know how to implement videos into your web pages using the HTML video tag and customise how they are displayed.

video

Related Tutorials

 thumbnail

The HTML <del> Tag

December 30, 2020
 thumbnail

How to Create HTML Paragraphs

December 22, 2020