HTML Video

The Media overview pointed you at several families. This session focuses on one: the video element for clips and demos you host yourself. Give visitors play and pause UI with controls instead of surprising them with auto-started sound.

What video does

video tells the browser to fetch a movie file and paint it in the page. You can point to one file with src, or list several <source> children so the browser can pick a supported format. Optional attributes reserve size (width / height), show a still frame before play (poster), and expose native controls.

Direct answer

Use <video controls src="movie.mp4"> or nest <source> children for several formats. Add a poster image for a preview frame before play. Include short fallback text (and optionally a download link) inside video for agents that cannot play the media. Prefer compressed, reasonably sized files.

Simple video with controls

A single MP4 plus controls and a width is enough for many teaching pages.

Reading the simple sample

• controls asks the browser for play/pause UI
• width="480" helps reserve layout space while the file loads
• src points to the movie file in your media folder
• Text inside video is fallback content when the element is not supported

Multiple sources and a poster

Browsers differ in format comfort. Listing WebM and MP4 with type hints, plus a poster still, is a common practical pattern.

Reading the multi-source sample

• poster shows a preview image until playback starts
• Each source names a file and a MIME type
• The browser chooses the first source it can play
• The download link inside helps when playback is unavailable

File size and formats

Huge camera exports stall on slow networks. Export a web-sized MP4 (and optionally WebM) that matches the teaching need — short demos beat multi-gigabyte masters on a lesson page. You do not need every container on day one; get one clear MP4 working, then add a second format if your audience requires it.

Autoplay: learn controls first

Autoplay with sound is often blocked and usually poor manners. Muted autoplay tricks exist for marketing heroes, but beginners should master controls and user-started playback first. When you need autoplay later, read browser policies carefully and keep an accessible pause path.

Captions and accessibility (habit)

If spoken content teaches something important, plan captions or a transcript — even if you wire full track elements in a later pass. Do not rely on the poster image alone as the only accessible summary of a talking-head lesson.

Width, height, and layout

Setting width (and matching height when you know the aspect ratio) reduces layout jump as the video metadata loads. Stretching with mismatched numbers looks wrong; keep the real aspect ratio in mind the same way you did for images.

Practice in your editor

1. Place a short .mp4 in a media folder.
2. Embed it with video + controls + a sensible width.
3. Add fallback text inside the element.
4. Optionally add a poster image and a second source format.
5. Open the page, play and pause, then test with the network throttled if you can — notice why file size matters.

Easy mistakes

• Missing controls so users cannot play easily
• Shipping huge uncompressed files that stall on slow networks
• Forgetting fallback text or a download link
• Reaching for autoplay with sound before you understand basics
• Putting alt on video the way you do on img (use captions/transcripts and visible descriptions instead)
• Confusing hosted YouTube embeds (iframe) with self-hosted video files

Summary

• video embeds movie files you host
• Use controls for play UI
• Multiple source tags improve format support
• poster shows a preview frame before play
• Prefer compressed files and avoid surprise autoplay sound