The HTML `video` tag
Discover the basics of working with the HTML `video` tag
The video
tag allows you to embed video content in your HTML pages.
This element can stream video, using a webcam via getUserMedia()
or WebRTC, or it can play a video source which you reference using the src
attribute:
<video src="file.mp4" />
By default the browser does not show any controls for this element, just the video.
Which means the audio will play only if set to autoplay (more on this later) and the user can’t see how to stop it, pause it, control the volume or skip at a specific position in the video.
To show the built-in controls, you can add the controls
attribute:
<video src="file.mp4" controls />
This is how it looks in Chrome:
The image initially displayed is the first frame of the video.
You can display another image, which is pretty a common need, using the poster
attribute:
<video src="video.mp4" poster="image.png" controls />
If not present, the browser will display the first frame of the video as soon as it’s available.
You can specify the MIME type of the video file using the type
attribute. If not set, the browser will try to automatically determine it:
<video src="file.mp4" controls type="video/mp4" />
A video file by default does not play automatically. Add the autoplay
attribute to play the audio automatically:
<video src="file.mp4" controls autoplay />
Some browsers also require the muted
attribute to autoplay. The video autoplays only if muted:
<audio src="file.mp3" controls autoplay muted />
The loop
attribute restarts the video playing at 0:00 if set, otherwise if not present the video stops at the end of the file:
<video src="file.mp4" controls autoplay loop />
You can set the width
and height
attributes to set the space that the element will take, so that the browser can account for it and it does not change the layout when it’s finally loaded.
It takes a numeric value, expressed in pixels.
CORS
Video is subject to CORS and unless you allow it on the server side, a video can’t be played cross-origin.
Nothing happens if you put this tag in a web page. There is no way to start the video, and it does not play autonomously. To make the video play, you must add the autoplay
attribute:
<video src="video.mp4" autoplay />
Changing the video display properties
You can set a width and height for the video area, expressed in pixels, using the width
and height
attributes:
<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />
Displaying content if video
is not supported
The video
tag is very well supported, up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You just add a closing tag, and insert text between the opening and closing tag:
<video src="video.mp4">Video tag not supported</video>
Adding multiple sources
Browsers can implement one video codec but not another. Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers.
You do so with the source
tag:
<video controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.avi" type="video/avi"/>
</audio>
You can style controls using CSS, although this is out of the scope for this introduction.
Preloading the video
If you don’t set autoplay
, the spec says that browsers will only download the video metadata (to find out the length, for example) but will not download the video itself.
You can force preloading the video using
<video src="video.mp4" preload="auto" />
Working with video events
We can listen for events on each video
element using JavaScript, to create interesting projects and interfaces. There is a lot of different events to play with.
The play
event is fired when the video playback starts:
document.querySelector('video').addEventListener('play', () => {
alert('Video is playing!!!')
})
You can also directly add this event (as the others) using the on<event>
attribute directly on the HTML element:
<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
alert('Video is playing!!!')
})
These are a few events you can listen to:
play
video started playingpause
video was pausedended
video playing completedtimeupdate
the user interacted with the playback timeline and went forward/backwardsvolumechange
the user changed the volume
There are a lot more events related to the video loading, and you can find the full list on MDN.
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025