HTML Video
The <video> element plays video files. The browser provides the player UI; you control playback through attributes or JavaScript.
Minimal video
<video src="clip.mp4" controls width="640"></video>
Common attributes
| Attribute | Effect |
|---|---|
src | URL of the video file. |
controls | Show the browser's built-in player UI. |
autoplay | Start playing as soon as enough data is buffered. |
muted | Start muted. Required by browsers for autoplay to work. |
loop | Restart from the beginning when the video ends. |
poster | Image shown before playback starts. |
preload | auto, metadata, or none — how aggressively to fetch. |
playsinline | Play inline on iOS instead of going full-screen. |
Multiple sources + captions
<video controls width="640" poster="cover.jpg">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
Sorry, your browser can't play this video.
</video>
Tip: For autoplay to work on most browsers, you must combine
autoplay, muted, and playsinline.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Video</title>
</head>
<body>
<h1>HTML Video</h1>
<p>This is a demo page for the "HTML Video" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Auto-play the video without sound on mobile (most browsers require both).
<video src="ad.mp4" autoplay
playsinline></video>
Boolean attribute that silences the audio.
Discussion
Loading…