HTML Tutorial
HTML Media
video, audio, and source tags play files in the browser without a plugin.
Playback is built in
Older pages needed Flash or another plugin to play a clip. Today the browser does it. Put a <video> or <audio> tag in the page, point it at a file, and the user can play, pause, and change volume with the built-in controls.
This chapter is the map. The next two chapters go deeper on video and audio. YouTube embeds come after that — they use an iframe, not these tags.
video, audio, and source
Three tags cover most media markup:
<video>— moving picture plus optional sound<audio>— sound only<source>— one file and its MIME type, nested inside video or audio
You can put a single src on the media element, or nest several<source> children so the browser picks a format it understands.
The controls attribute
Without controls, many browsers show a player with no buttons. Add the attribute so people can start and stop the file themselves. It has no value: the name is enough.
Example
<video controls width="400">
<source src="clip.mp4" type="video/mp4">
Your browser cannot play this video.
</video>
<audio controls>
<source src="talk.mp3" type="audio/mpeg">
Your browser cannot play this audio.
</audio>The line of text inside the element is fallback for browsers that do not support the tag. It is not a caption for the file.
Click Try it in HTML under an example to open /html/try. That is the live HTML preview,.
Several formats, one player
Not every browser likes every file type. A common pattern is two <source>tags: the browser uses the first format it can play and ignores the rest.
Example
<video controls width="400">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
Sorry, this browser cannot play the video.
</video>The same idea works for audio: offer MP3 and Ogg, and the player still looks like one control.
Do not depend on a mystery URL
The filenames above are placeholders. StudyGrid does not host clip.mp4. A random MP4 on the public web may 404, block hotlinking, or disappear. Learn the markup first; plug in files you actually have when you publish.
Source fallback works like this:
- The browser reads the first
<source>. - If the type is supported and the file loads, it plays that file.
- If not, it tries the next
<source>. - If none work, it shows the fallback text inside the media element.
In the live preview, a missing file will not play. That is expected. The lesson is the tags and the fallback order, not a hosted demo clip.
What belongs where
| Need | Use |
|---|---|
| Your own MP4 or WebM file | video + source |
| Your own MP3 or Ogg file | audio + source |
| A clip that lives on YouTube | An iframe embed (later chapter) |
| A still picture | img, not video |
Next: the video element in detail — width, poster frames, autoplay rules, and captions.
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.
Biology
A heart-sound clip with controls
audio and video are HTML elements. controls shows the native bar. Multiple source children let the browser pick a format it can play.
Always include fallback text for old browsers. Captions belong in tracks on video; audio still needs a transcript nearby for accessibility.
Example
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
Audio not supported in this browser.
</audio>
<p>Demo clip — not a real stethoscope recording.</p>Physics
A short motion clip
poster is the still frame before play. width without height can squash the picture; set both or let CSS keep the aspect ratio.
Example
<video controls width="280" poster="https://picsum.photos/seed/dropvid/280/120">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Video not supported.
</video>