Input HarborISSUE #22 of 46

media · video · audio · sources

FormaVSCaptain Invalid Input

Forma says<video> and <audio> embed media natively; multiple <source> tags let the browser pick a format it supports.

<video> and <audio> play media with no plugins. Point them at a file with src, or nest several <source> elements so the browser picks the first format it can play (MP4, WebM, …).

Add controls for the default play UI. Put fallback text between the tags for ancient browsers. Browser format support varies, so offering two sources (MP4 + WebM) maximizes compatibility.

Power-ups you unlock

<video>/<audio> play media with no plugins
Multiple <source> = browser picks a supported format
controls shows the native play UI
Offer MP4 + WebM for broad compatibility

Captain Invalid Input attacks — common mistakes

A single exotic format no browser can decode
Omitting controls and no JS to play it → silent dead box
Huge unoptimized files that stall on slow connections

Boss battleAdd a <video controls> with two <source> elements (mp4 + webm) and fallback text underneath.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;display:grid;place-items:center;height:100vh;margin:0">
  <video controls width="320" poster="https://via.placeholder.com/320x180">
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    your browser cannot play this video.
  </video>
</body></html>

▶ Open the interactive comic issue

‹ Svg · Paths · Gradients · Animation Video · Controls · Poster · Tracks ›