Video in HTML
? Video in HTML
HTML allows you to embed video content directly into web pages using the <video> element, introduced in HTML5.
? Basic Syntax
<video width="640" height="360" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video>? Attributes of <video>
| Attribute | Description |
|---|---|
src | Path to the video file |
controls | Displays video controls (play, pause, etc.) |
autoplay | Automatically starts playing the video |
loop | Repeats the video after it ends |
muted | Starts the video with no sound |
poster | Image to show before the video plays |
width/height | Sets size of the video player |
preload | Tells the browser whether to preload the video |
? Multiple Sources (Browser Compatibility)
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag.</video>Browsers will try each source in order and use the first compatible one.
? Example with All Features
<video width="600" height="340" controls autoplay muted loop poster="thumbnail.jpg"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> Your browser does not support the HTML5 video tag.</video>? Accessibility Tips
Use a caption/subtitle track with
<track>Provide descriptive alt content inside the
<video>tagUse clear filenames and poster images
? Common Video Formats
| Format | Type | Notes |
|---|---|---|
.mp4 | video/mp4 | Most widely supported |
.webm | video/webm | Open format, good for web |
.ogg | video/ogg | Supported by some browsers only |
Would you like a downloadable HTML video player template or a live preview page to test your videos?
