HTML Video
The video element puts a video player on a page. The controls attribute adds the player buttons.
A player with controls
The controls attribute adds the player buttons. The player area stays empty with no video file.
<video controls width="320"></video>Naming a video file
The source element names the video file. The type value tells the browser the file kind. This lesson ships no video file, so the player still stays empty.
<video controls width="320">
<source src="tour.mp4" type="video/mp4">
</video>Fallback text
Fallback text sits inside the video element. A browser that cannot play video shows this text instead.
<video controls width="320">
This browser cannot play video.
</video>A player without controls
A video with no controls attribute shows no buttons. The player area still stays empty with no video file.
<video width="320"></video>Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harbour Tour</title>
</head>
<body>
<h1>Harbour Tour</h1>
<p>Watch the short tour below.</p>
<video controls width="320">
This browser cannot play video.
</video>
<p>The player has no video file. It stays empty for now.</p>
</body>
</html>Key points
- video: an element that puts a video player on a page
- controls: an attribute that adds player buttons
- source: an element that names a media file for a player
- Several source elements can sit in one player
- The browser tries source elements in order
In this example, the heading and the first paragraph introduce the tour. The video element holds a player with controls. The fallback text inside the player stays hidden in a supporting browser. The last paragraph states plainly that the player has no video file.
Note
The closing example has no video file. Its player area stays empty.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
What does the controls attribute add to a video player?