How to Use the HTML Video Tag
John on October 08, 2020
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:
| Browser | MP4 | WebM | OGG |
|---|---|---|---|
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | yes | no |
| Edge | yes | yes | yes |
| Opera | yes | yes | yes |
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:
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>
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:
| Attribute | Value | Description |
|---|---|---|
| controls | controls | Use the browsers built-in video controls. |
| autoplay | autoplay | Start the video playback immediately on page load. |
| height | pixels | The height of the video player in pixels. |
| width | pixels | The width of the video play in pixels. |
| loop | loop | The video will loop from the beginning infinitely until stopped by the user. |
| muted | muted | Mute the audio by default. |
| poster | URL | A 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. |
| src | URL | Set 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.
