HTML Audio/Video

Introduction

Audio and video element markup controls media delivery without Flash — src, poster, track, preload, controls, and crossorigin attrs orchestrate LCP, captions compliance, and streaming security. Staff engineers treat video hero as LCP candidate and caption tracks as legal requirements, not nice-to-haves.

Business problem

Business pressure: Autoplay video without muted poster hurts LCP and mobile data; missing track kind=captions fails WCAG and FCC-style requirements for public media.

• Legal: Caption lawsuits on educational and promotional video.
• Perf: preload=auto on multiple videos saturates bandwidth.
• SEO: Video structured data needs accessible landing HTML too.

Why this feature exists

Platform motivation: Native media elements integrate with browser demuxer, hardware decode, and Media Source Extensions.

• History: Flash replacement; codec wars (H.264, VP9, AV1).
• Alternative rejected: Pure JS players without video tag lose native a11y hooks.
• Modern role: HLS/DASH via MSE behind same video element facade.

Browser internals

Media element lifecycle: load metadata → canplay → play; networkState and readyState drive spinner UI; audio/video join render tree with separate compositor path.

• Parser: source children provide codec fallback chain.
• DOM: textTracks for captions; activeCue for rendering.
• Script impact: Autoplay policies block unmuted autoplay — attribute alone insufficient.

Rendering workflow

Video LCP: Poster image often IS LCP — optimize poster like hero img; video first frame delay hurts metrics.

• Critical path: preload=metadata or none until user intent; poster with fetchpriority high.
• Layout: width/height on video prevents CLS before metadata.
• Paint: controls attribute native UI vs custom — custom needs a11y rebuild.

Feature deep dive

Key attrs: src OR source type=codec; poster; preload (none|metadata|auto); controls; muted; loop; playsinline (iOS); crossorigin; disablepictureinpicture; track kind=subtitles|captions|descriptions|chapters|metadata.

• Multiple source: Order codec preference; type attr helps selection.
• Captions: WebVTT srclang label default attributes on track.
• Audio: controls minimal; transcript link required enterprise.

<video controls width="1280" height="720" poster="poster.webp" preload="metadata" playsinline>
  <source src="promo.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
  <source src="promo.h264.mp4" type="video/mp4">
  <track kind="captions" src="promo.en.vtt" srclang="en" label="English" default>
  <p>Download <a href="promo.h264.mp4">video</a> or read <a href="transcript.html">transcript</a>.</p>
</video>

Accessibility analysis

Media a11y: Captions required; audio description second track or alternative video; transcript HTML page; controls keyboard operable if custom skin.

• Screen readers: Native controls expose play/pause; custom must replicate.
• Keyboard: Space toggles play on focused video — native behavior.
• WCAG: 1.2.2 captions prerecorded; 1.2.5 audio description.

SEO impact

Video SEO: VideoObject JSON-LD; transcript page indexable; poster alt in surrounding HTML; avoid sole content in unrendered video stream.

• Crawl: Google video indexing uses landing page + structured data.
• Rich results: key moments seek markup optional advanced.
• Core Web Vitals: Poster LCP optimization critical.

Security considerations

Media security: crossorigin needed for canvas draw and some analytics; CORS on media files; don't expose signed URLs in HTML longer than TTL.

• XSS: track src vtt must be sanitized — can inject cues.
• CSP: media-src directive controls playback URLs.
• Privacy: autoplay tracking — muted autoplay policies.

Performance impact

Perf: preload=auto on hero acceptable only with intent; lazy load video below fold with preload=none; multiple renditions adaptive via MSE not 5 source tags blindly.

• LCP: poster webp dimensions + preload; not autoplay video as LCP.
• INP: Custom controls event handlers optimized.
• CLS: aspect-ratio box from width/height attrs.

Real production example

Enterprise e-learning: Mandatory track per locale; transcript link in HTML; video preload none until slide enter viewport.

Enterprise usage

Enterprise: Media CMS enforces caption upload before publish; HTML export template includes track tags.

• Design system: Video component documents poster and track slots.
• CMS: Authors cannot set autoplay without muted + approval.
• CI gates: Lint video without track on public pages fails.

Common production failures

What breaks in prod: Marketing autoplay unmuted hero — mobile LCP 8s and data overage complaints.

• Incident: Missing captions on CEO keynote — ADA complaint.
• SEO regression: Video landing thin HTML wrapper — poor indexation.
• Perf regression: five 4K source tags all probed — bandwidth waste.

Architecture review questions

• Are captions or subtitles track provided for prerecorded video?
• Is poster optimized and treated as potential LCP?
• Is preload appropriate for viewport position?
• Are width and height set to prevent CLS?
• Is transcript or alternative available in HTML?

Hands-on project

Project: Implement video with poster, dual source, captions track, transcript link, and fallback paragraph — axe and Lighthouse pass.

• Deliverable: full video markup per reference.
• Verify: Keyboard play/pause; captions appear.
• Stretch: prefers-reduced-motion respect pause autoplay.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

Audio/video reference documents src/source/track/poster/preload attributes tying media HTML to LCP, caption compliance, codec fallback, and CSP media-src governance.