HTML Video Tutorial for Beginners – Simple Explanation

The HTML <video> element lets you embed video files directly into your web pages. No extra plugins needed. Just pure HTML.

The video Element

To add a video to your page, use the <video> tag. You can specify multiple video formats so the browser can pick the one it supports.

The controls attribute adds play, pause, and volume buttons. Always include it so users can control the video.

How It Works

You put <source> tags inside the <video> element. Each <source> points to a different video format. The browser picks the first one it can play.

Always include width and height. This reserves space on the page and prevents flickering while the video loads.

Tip: Always provide an MP4 version. It works in all modern browsers. OGG or WebM are good backups.

Autoplay Videos

You can make a video start automatically with the autoplay attribute. However, most browsers block autoplay with sound. To autoplay, you must also mute the video.

Note: Chrome, Edge, Safari, and Firefox block autoplay with sound. To autoplay, always add the muted attribute along with autoplay.

Loop and Poster Attributes

The loop attribute makes the video repeat. The poster attribute shows an image before the video starts playing.

Supported Video Formats

There are three main video formats supported by HTML. MP4 is the safest choice because it works everywhere.

Format	File Extension	Browser Support
MP4	.mp4	✅ All browsers (recommended)
WebM	.webm	✅ All modern browsers
OGG	.ogg	✅ All modern browsers

Media Types (MIME Types)

When using <source>, always specify the type attribute with the correct MIME type.

File Format	Media Type
MP4	`video/mp4`
WebM	`video/webm`
OGG	`video/ogg`

Controlling Video with JavaScript

You can control videos with JavaScript. This example uses buttons to play, pause, and reset the video.

<!DOCTYPE html>
<html>
<body>

<h3>Controlled Video</h3>
<video id="demoVideo" width="400" height="240" style="max-width: 100%; height: auto;">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<br>

<button onclick="demoPlayVideo()" style="background-color: #04aa6d; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;">Play</button>
<button onclick="demoPauseVideo()" style="background-color: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;">Pause</button>
<button onclick="demoResetVideo()" style="background-color: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;">Reset</button>

</body>
</html>

Quick Summary

Use <video> to embed videos. Always include controls.
Use <source> inside to provide multiple formats. MP4 is the safest.
Set width and height to prevent page flickering.
Use autoplay muted if you want videos to start automatically.
Use loop to repeat the video.
Use poster to show an image before the video plays.
You can control videos with JavaScript using .play(), .pause(), and .currentTime.

What Just Happened? Let Me Explain

The <video> tag is supported in all modern browsers. You no longer need Flash or other plugins.
MP4 with H.264 video and AAC audio is the most compatible format. Use it for all your web videos.
Browsers block autoplay with sound to protect users from unexpected noise. If you want autoplay, mute the video.
The text inside the <video> tag only shows in very old browsers that do not support the video tag.
You can host video files on your own server, but video files are large. Consider using a video hosting service like YouTube or Vimeo for better performance.

Tip: Always compress your videos before uploading. Large video files slow down your website. Tools like HandBrake or online compressors can make videos much smaller without losing quality.

HTML Video Reference

Tag / Attribute	Description
`<video>`	Defines a video or movie
`<source>`	Defines multiple media resources (for <video> and <audio>)
`controls`	Adds play, pause, and volume buttons
`autoplay`	Starts the video automatically
`muted`	Mutes the video (required for autoplay)
`loop`	Repeats the video when it ends
`poster`	Shows an image before the video starts