Media: Video, Audio

📖 Theory

A promo clip that plays nothing

You have a 20 second FestConnect promo video. You drop it in with <video src="promo.mp4"></video>, refresh, and see a blank rectangle. The file is fine, the path is right, but there is no play button, no anything.

HTML5 can play video and audio with no plugin at all, but the player only appears if you ask for it. The tag that carries the clip and the attribute that reveals the controls are two separate decisions.

📖 Theory

A TV with the remote taken away

A <video> with no controls is a switched-off TV bolted to the wall: the picture is there, but the visitor has no buttons to press. Adding controls hands them the remote: play, pause, seek, volume. For most pages you want the remote visible, so controls is the attribute you reach for first.

📖 Theory

The two tags and their key attributes

• `<video>` and `<audio>` embed a clip natively.
• controls: shows the play/pause/volume bar. Usually essential.
• src or nested `<source>` tags: the file(s). Multiple <source> children let the browser pick a format it supports.
• autoplay, loop, muted: start on load, repeat, start silent.
• poster (video only): a preview image shown before play.

Text placed between the opening and closing tags is a fallback message for browsers that cannot play it.

⌨️ Practical

FestConnect promo video and audio

<video controls width="600" poster="images/promo-cover.jpg">
  <source src="media/promo.mp4" type="video/mp4">
  <source src="media/promo.webm" type="video/webm">
  Your browser cannot play this video.
</video>

<audio controls>
  <source src="media/announcement.mp3" type="audio/mpeg">
  Your browser cannot play this audio.
</audio>

<!-- To autostart, browsers require it be silent: -->
<!-- <video autoplay muted loop> ... </video> -->

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Why two <source> tags?

The video offers both promo.mp4 and promo.webm. Why list two files for the same clip instead of just one? What does the browser do with them? Think first.

🧩 Quiz

You add `<video autoplay>` for the promo, but on most phones it refuses to start automatically. What is the fix that browsers actually require?

1. Add the muted attribute: browsers block autoplay with sound
2. Remove controls so autoplay takes over
3. Switch the file from mp4 to mp3
4. Add loop, which forces autoplay to begin

⚠️ Watch out

Media traps

• Invisible player: no controls and no autoplay means the user sees nothing to click. If a question shows a <video> with just src and asks 'what does the user see?', the answer is a frame with no buttons.

• Autoplay needs muted: never claim autoplay alone plays sound on load.

• Wrong tag for the media: <audio> for sound, <video> for moving pictures. And put the fallback text between the tags, not in an attribute.

📖 Theory

From raw tag to styled card

This native player is functional but plain. In Unit 2, Bootstrap's media object and card components wrap a video or thumbnail in a tidy layout with a title and text beside it, exactly what a FestConnect event card wants. The <video>/<audio> tag stays the same; Bootstrap only styles the box around it.

✅ Summary

Key takeaways

• <video> and <audio> embed clips natively, no plugin needed.
• Add controls to show the play/pause bar; without it (and without autoplay) nothing is visible.
• Multiple <source> children offer several formats; the browser plays the first it supports (mp4 is the safe video default, mp3 for audio).
• autoplay is blocked with sound: pair it with muted to autostart.
• Text between the tags is the fallback for browsers that cannot play the file; poster sets a video preview image.
• Memory hook: no controls, no remote.