HTML Tutorial

HTML Video

The video element plays MP4 and WebM with controls, posters, and captions.

A player in the page

<video> is the HTML way to play a movie file you host yourself. MP4 (H.264) and WebM cover almost every current browser. Nest <source> tags so the browser can pick one.

This is not a YouTube embed. If the clip lives on YouTube, use an iframe in the YouTube chapter. Use <video> when the file is yours.

controls and width

Add controls so play, pause, volume, and fullscreen appear. Setwidth in pixels (or with CSS) so the player does not blow out the layout. Height usually follows the video’s aspect ratio.

Example

<video controls width="480">
  <source src="intro.mp4" type="video/mp4">
  Your browser cannot play this video.
</video>

intro.mp4 is a placeholder name. Put a real file next to your HTML when you publish. The live preview at /html/try will not find a missing file; the markup is still correct.

source and type

Each <source> has src (the file) and type (the MIME type). The browser skips types it cannot decode.

Example

<video controls width="480">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  Download the <a href="intro.mp4">MP4</a> instead.
</video>

List the format you prefer first. Many sites put WebM first and MP4 second. Fallback text (or a download link) sits after the sources, inside the same <video>.

A poster frame

poster is an image shown before playback starts. Use a still from the clip or a title card so the player is not a black box while the file loads.

Example

<video controls width="480" poster="intro-still.jpg">
  <source src="intro.mp4" type="video/mp4">
</video>

The poster is a normal image file. Give it alt meaning in nearby text if the still is important; the attribute itself is just a URL.

muted, autoplay, and loop

Three boolean attributes change how playback starts:

muted — start with sound off
autoplay — try to start as soon as the page can
loop — restart when the clip ends

Example

<video controls width="480" muted autoplay loop poster="intro-still.jpg">
  <source src="intro.mp4" type="video/mp4">
</video>

Browsers block autoplay with sound. A muted, looping background clip may start; a clip that blasts audio usually will not until the user presses play. Do not rely on autoplay for anything the visitor must hear.

Prefer controls and a poster. Let people choose when to play. Autoplay is a special case for silent decorative loops, not for lessons or announcements.

Captions with track

The <track> element points at a WebVTT captions file (.vtt). Conceptually it is a timed transcript: each cue has a start time, an end time, and the words to show.

Use kind="captions" for dialogue and sound that people need in text.srclang is the language code. label is the name in the player’s captions menu. default turns that track on.

You do not need a real .vtt in this chapter. Remember the shape: video, then sources, then one or more tracks, then fallback text. Captions help people who cannot hear the audio, watch in a quiet room, or prefer to read.

A sensible default

Always include controls unless you build custom buttons in JavaScript
Offer MP4 and, if you can, WebM
Add a poster so the player has a face before play
Treat autoplay as muted-only, and skip it for teaching clips

Next: the audio element, which is the same idea without a picture.

Worked examples

The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.

HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.

Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.

Physics

A drop-test recording

The video element plays files in the page. MP4/H.264 is the usual pair. Offer WebM as a second source when you host your own files.

autoplay with sound is blocked in most browsers — and rude in a classroom. Keep controls visible.

Example

<video controls width="280">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Your browser does not play this video.
</video>
<p>Replace the source with your lab camera file when you have one.</p>

Astronomy

A muted sky clip

muted lets a silent loop start where policy allows. Prefer a button. Space on a phone is expensive; do not autoplay four clips.

Example

<video controls muted width="280">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

FAQ: HTML Video

Common questions about this page.

What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html video examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html video in this HTML HTML lesson (HTML Video).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.