HTML Video

Introduction

<video> is the visual half of HTML5 media — a replaced element whose decode path is OS-accelerated and whose attributes encode product policy: poster for preview, playsinline for iOS, muted for autoplay, preload for bandwidth. Staff engineers align video markup with CDN adaptive streaming (HLS/DASH), not single 500MB MP4 files.

Business problem

Business pressure: Video commerce, training, and hero loops drive revenue — Shopify merchants report higher conversion with product clips. But unoptimized <video src="huge.mp4"> destroys mobile rankings and inflates CDN bills. YouTube embeds trade control for infrastructure; self-hosted video demands encoding ladders and caption pipelines.

• Conversion: Product video with captions increases completion for deaf users and silent browsing — 85% Facebook video watched muted.
• Compliance: Public-sector and edu content requires WCAG 1.2.x conformance on every clip.
• SEO: Video landing pages need transcript + VideoObject — Google Video tab eligibility.

Why this feature exists

Platform motivation: Unified replacement for Flash video with GPU decode and battery-aware playback. Mobile Safari's insistence on playsinline shaped the attribute — without it, fullscreen hijack killed in-feed video ads.

• History: Codec wars (H.264 vs WebM) settled into dual-source patterns; AV1 emerging for YouTube and Netflix re-encodes.
• Alternative rejected: GIF/video-as-img tags — no seek, no captions, terrible compression.
• Modern role: Shell for MSE/fetch streaming; attribute surface unchanged for a11y tools.

Browser internals

Inside the engine: HTMLVideoElement extends media element with videoWidth/videoHeight after metadata. First frame replaces poster; compositor may use overlay plane. Picture-in-Picture API attaches to same element. requestVideoFrameCallback syncs canvas draw to vsync — used in Google Meet filters.

• Decoder: Hardware path when codec supported; software fallback spikes CPU and heat on old Android.
• Visibility: Browsers pause off-tab video unless disableRemotePlayback unset — saves battery.
• Fullscreen: webkitEnterFullscreen legacy on iOS — prefer playsinline + CSS fullscreen container.

video.addEventListener('loadedmetadata', () => {
  console.log(video.videoWidth, video.videoHeight, video.duration);
});
// Autoplay probe
video.play().catch(e => console.warn('Autoplay blocked:', e.name));

Rendering workflow

Rendering path: Until metadata loads, poster displays as image. Video layer composites above page content; sibling DOM controls paint separately. CSS object-fit: cover on hero loops is Instagram/TikTok web pattern — crops without re-encode.

• Critical path: Do not put 4MB MP4 in src before LCP image — stagger or lazy-load below fold.
• Layout: aspect-ratio: 16/9 on wrapper — prevents CLS when metadata arrives.
• Paint: Mix-blend-mode on video disables HW decode on some GPUs — test Samsung Internet.

Feature deep dive

Video attributes as policy: controls — native UI; autoplay + muted — silent loop; loop — GIF replacement; preload="none|metadata|auto" — network hint; poster — LCP and social share frame; playsinline — iOS inline; disablePictureInPicture — DRM/policy.

• Responsive: width="100%" with max-width container; source separate renditions via media queries in JS or HLS.
• DRM: EME wraps video element — Widevine on Netflix; markup still needs accessible controls outside shadow DRM.
• Thumbnail: #t=10 media fragment on poster URL — YouTube share link pattern for start time.

<figure class="product-video">
  <video controls width="720" height="405" poster="/products/shoe-360.webp" preload="metadata" playsinline>
    <source src="/products/shoe-360.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
    <source src="/products/shoe-360.mp4" type="video/mp4">
    <track kind="captions" src="/products/shoe-360.en.vtt" srclang="en" label="English">
  </video>
  <figcaption>360° view — captions describe rotation sequence</figcaption>
</figure>

Accessibility analysis

A11y architecture: Video demands captions, keyboard-operable controls, and flash prevention (WCAG 2.3.1). Native controls vary by platform — Netflix custom UI implements full WAI-ARIA APG media guide. Poster alt text is NOT on video — use figcaption or aria-labelledby.

• Screen readers: Describe purpose in visible text nearby — "Product demo video" not "video.mp4".
• Keyboard: Focus trap in modal video lightboxes must restore focus on close — Shopify product zoom pattern.
• WCAG: Provide pause control for auto-updating content exceeding 5 seconds.

SEO impact

SEO architecture: Video sitemap entries need title, description, thumbnail URL, and optionally clip timings. Self-hosted pages should expose transcript in crawlable HTML — Google uses text for relevance when ASR unavailable.

• Crawl: Avoid only-JS injected src — bots may not execute play().
• Rich results: Clip structured data for key moments — YouTube chapter markup equivalent on owned sites.
• CWV: Video as LCP element fails unless poster optimized — rare to pass with video-first LCP.

Security considerations

Security boundary: Open redirect via video src in CMS; tokenized URLs expiring in embeds. Cam/mic is separate (getUserMedia) but combined players blur boundaries — validate src allowlist server-side.

• XSS: Low on video itself; custom overlay HTML over player is the risk surface.
• CSP: media-src 'self' cdn.example.com — block data: URLs in enterprise.
• Embed: iframe video from YouTube inherits their CSP — still need title attribute for a11y.

Performance impact

Performance: Encoding ladder: 240p–1080p HLS segments; single 4K MP4 in src is amateur hour. Netflix saves 50%+ bandwidth via per-title encode; mimic with capped max resolution on mobile via client hints or JS viewport check.

• LCP: Poster WebP <50KB, same dimensions as video — not a blurry downscale.
• INP: Seek bar on input event not timeupdate — 4Hz vs 250Hz difference.
• CLS: Figure with aspect-ratio before script enhances player.

Real production example

YouTube product embed vs self-hosted: Embed trades LCP/INP (iframe + third-party JS) for free encoding/CDN. Self-hosted Shopify clip: MP4 + WebM sources, poster, VTT, VideoObject schema, lazy IntersectionObserver load when thumb enters viewport.

• Lazy load: data-src on source until visible — saves cellular data on long pages.
• Metrics: Startup time, rebuffer, watch completion — analytics on play/ended/pause.
• iOS: playsinline mandatory for inline product loops — missing it fullscreen-jumps and kills UX.

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const v = e.target;
      v.querySelector('source').src = v.dataset.src;
      v.load();
      io.unobserve(v);
    }
  });
}, { rootMargin: '200px' });
document.querySelectorAll('video[data-lazy]').forEach(v => io.observe(v));

Enterprise usage

Enterprise: Learning platforms (LinkedIn Learning) version videos with caption burn-in for download offline but WebVTT for web. DAM integration auto-generates poster frame at 10% duration and 15-second preview clip for search.

• Design system: Video aspect ratios 16:9 and 9:16 vertical — Reels/TikTok commerce.
• CMS: Required fields: poster, captions, transcript, expiry date for licensed stock footage.
• CI: Media accessibility scanner on PR previews — fails without tracks.

Common production failures

What breaks in prod: iOS playsinline omissions, autoplay without muted, and 4K src on 3G — classic RUM failures.

• Incident: Black screen on iOS — missing playsinline; CEO demo failed live.
• SEO: Video landing with no indexable text — ranked only for brand navigational queries.
• CDN bill: Autoplay below fold on 50 SKUs — $40k/month egress overage.

Architecture review questions

• Is playsinline set for iOS inline playback?
• Does poster match video aspect ratio and serve as stable LCP?
• Are captions bundled and user-toggleable?
• Is src a single huge file or adaptive/ladder strategy?
• What UX shows when play() rejects autoplay?
• Is video lazy-loaded below the fold?

Hands-on project

Project: Product detail video: lazy load, dual codec, captions, poster LCP, keyboard controls, VideoObject JSON-LD.

• Deliverable: Figure/figcaption semantics; play() error handling UI message.
• Verify: iOS Safari inline playback; Lighthouse; Rich Results Test.
• Stretch: IntersectionObserver lazy + bandwidth-save mode on saveData.

Interview questions

Try it yourself

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

Summary

The video element is production streaming policy in markup: playsinline for iOS, muted autoplay rules, poster-driven LCP, multi-source codecs, caption tracks, and lazy loading — with custom UI throttled to protect INP.