H.264 / H.265 / H.266 Web Frontend Playback: Which Generation to Pick in 2026
In the MiBee NVR surveillance-dashboard project, should the frontend pull H.264 or H.265 from all 16 cameras? A seemingly simple question that gets deeper the more you dig. H.265 needs only half the bitrate of H.264 at the same quality, saving both bandwidth and storage. But plenty of online sources still claim “H.265 browser support is poor, Firefox doesn’t support it, you need to install extensions.” Which of these claims still hold?
This article puts H.264/AVC, H.265/HEVC, and H.266/VVC side by side across every layer of Web frontend playback: browser-native decoding, WebCodecs, MSE, WASM soft decoding, player libraries, streaming protocols, camera gateways, multi-stream concurrency, NAT traversal, and the hardware decoding ecosystem. Browser version numbers, CPU measurements, and player star counts drift over time — verify against the upstream repos before production. CPU usage and multi-stream numbers are typical references; real-world performance depends on hardware and workload.
Core Differences Across the Three Generations
The three codec generations were jointly developed by ITU-T VCEG and ISO/IEC MPEG, roughly seven years apart. Each generation improves compression efficiency by about 50% and complexity by about 10x.
| Codec | Released | Working Group | Main Goal |
|---|---|---|---|
| H.264 / AVC | 2003 | JVT (VCEG + MPEG) | Replace H.263/MPEG-2, suit mobile and broadcast |
| H.265 / HEVC | 2013 | JCT-VC | 4K broadcast, mobile HD, ~50% bitrate saving over AVC |
| H.266 / VVC | 2020 | JVET | 8K, HDR, 360°, screen content, ~50% over HEVC |
The per-generation bitrate saving is an objective metric verified by JVET’s official Common Test Conditions. Using 1080P@30fps business video as the baseline, the gap between the three generations is substantial:
The compression gain comes with exponential complexity growth. Bross et al.’s VVC overview in IEEE TCSVT 2021 reports that VVC encoding complexity is 8-12x HEVC, decoding complexity 1.5-2x. Combined with industry measurements of AVC/HEVC:
| Codec | Encode complexity (vs AVC) | Decode complexity (vs AVC) | Typical 1080P soft-decode CPU |
|---|---|---|---|
| H.264 / AVC | 1x | 1x | 20–30% |
| H.265 / HEVC | 10x | 2x | 40–50% |
| H.266 / VVC | 100x | 3.5x | 70–90% |
Decode complexity directly determines WASM soft-decode feasibility — this is the root cause of “why H.266 can’t go on the Web yet,” discussed below.
Browser Native Support Matrix
Browser-native support is the first gate for frontend playback.
H.264 / AVC: universally available
H.264 is a mandatory video codec under WebRTC spec RFC 7742 (VP8 is also mandatory, but H.264 dominates real deployments). All major browsers decode it natively, with support long sitting at 98–99% (CanIUse numbers fluctuate; there’s no authoritative figure precise to the decimal).
H.265 / HEVC: fragmented ecosystem, real improvement
H.265 browser support depends on system-level hardware extensions. Windows 10/11 needs the “HEVC Video Extensions” from the Microsoft Store (paid or OEM preinstalled); macOS 10.13+/iOS 11+ has system-level support; Android 5.0+ depends on the SoC.
| Browser | Desktop support | Starting version | Notes |
|---|---|---|---|
| Chrome | Needs OS extension | 107+ (Oct 2022) hardware by default | Linux still unsupported |
| Edge | Needs OS extension | 120+ hardware by default | isTypeSupported has a “fake support” trap |
| Firefox | 134+ (Jan 2025) Windows onward | 136+ macOS | Mozilla dropped its patent stance |
| Safari | Full support | 11+ (macOS 10.13+/iOS 11) | VideoToolbox hardware decode |
Firefox’s HEVC turning point deserves a dedicated note, because most Chinese-language sources haven’t caught up:
Mozilla long refused desktop HEVC, citing in Bugzilla bug 1534864 a conflict between MPEG-LA licensing fees and its open-source policy. That stance was broken in Firefox 134 (Jan 2025), which began calling the Windows system HEVC hardware decoder; Firefox 136 extended this to macOS. In other words, by mid-2026 “Firefox doesn’t support HEVC” is only true for Firefox 133 and older. If Firefox share matters in your deployment, requiring ≥134 is sufficient.
Linux desktop remains a blind spot: neither Chromium nor Firefox natively supports HEVC on Linux (patent issues). No short-term fix here.
H.266 / VVC: zero support
As of July 2026, no major browser has native VVC decoding. There’s an open issue on the Chromium Issue Tracker tracking the WebCodecs VVC support request, but it’s still at the discussion stage with no implementation plan. CanIUse shows VVC global support at 0%.
By contrast, the royalty-free AV1 has reached 80%+ browser support in Chrome 70+, Firefox 65+. Commercially, the VVC patent pool (led by Access Advance, charging consumer devices ~$0.40–0.60/unit) gives browser vendors little incentive. AV1 has effectively taken the “next generation” slot on the Web, and VVC may never arrive.
WebCodecs / MSE / WASM: Three Decode Paths
Once the frontend receives a video stream, there are three decode paths. Choosing wrong leads directly to CPU spikes or black screens.
flowchart TD
A[Video stream] --> B{WebCodecs HW decode available?}
B -->|yes| C[VideoDecoder render]
B -->|no| D{MSE native support?}
D -->|yes| E["video tag + fMP4"]
D -->|no| F{Resolution ≤1080P?}
F -->|yes| G["WASM soft decode<br/>libde265.js"]
F -->|no| H[Cannot play]
style C fill:#4CAF50,color:#fff
style E fill:#2196F3,color:#fff
style G fill:#9C27B0,color:#fff
style H fill:#f44336,color:#fffWebCodecs API (preferred since 2023)
WebCodecs is a W3C-standardized low-level browser codec interface that lets the frontend get raw NALUs and decoded VideoFrames directly, without going through MSE’s encapsulation layer. For zero-latency playback, custom rendering, and AI-inference preprocessing, this is the preferred path.
- H.264: supported by Chrome 94+, Edge 94+, Safari 16.4+, Firefox 130+ — the most-supported codec.
- H.265: support rate fluctuates by platform — available on Chrome/Edge/Safari when the HEVC extension is installed, and on Firefox ≥134 on Windows. The widely-cited “85%” figure is unclear in origin and likely comes from AV1-via-WebCodecs data; HEVC-via-WebCodecs is actually lower (depends on whether the user’s machine has the HEVC extension installed).
- H.266: no support at all.
Example of WebCodecs with HEVC:
| |
Three common HEVC WebCodecs pitfalls:
hvc1andhev1are not interchangeable.hvc1(in-band parameter sets) suits most cases;hev1(out-of-band parameter sets) requires manually configuring the description field orconfigure()throws. Gateways remuxing RTSP/H.265 → fMP4 must outputhvc1, or Chrome/Edge will show garbage frames. SRS, ZLMediaKit, and MediaMTX default tohvc1.- Must be served over HTTPS, with
hardwareAcceleration: 'prefer-hardware'set, or it falls back to software. - Edge in some versions returns true for
MediaSource.isTypeSupported('video/mp4; codecs="hvc1.1.6.L150.B0"')but actually shows a black screen — it only validates codec-string syntax, not whether the decoder exists. The correct approach is a second check withVideoDecoder.isConfigSupported, plus playing a minimal HEVC fMP4 and listening forvideo.error.
MSE (the most stable fallback)
Media Source Extensions lets the frontend append fragmented video to a <video> via JS. H.264 + fMP4 works stably across all modern browsers and is the foundation of HLS.js, flv.js, mpegts.js. H.265 + fMP4 depends on whether the browser’s MSE supports HEVC — same matrix as the H.265 native support above.
| |
WASM soft decode (last-resort fallback)
When a browser doesn’t natively support a codec (old Firefox without H.265, all browsers without H.266), WASM soft decode is the only option. The cost is high CPU, large memory, and poor mobile UX.
| Codec | Main WASM decoders | 1080P performance | Notes |
|---|---|---|---|
| H.264 | Broadway.js / libmedia | ~25–30 fps | Browser-native is good enough; WASM mainly for unified behavior |
| H.265 | libde265.js / libmedia | ~30–35 fps | Fallback for old Firefox, Linux desktop |
| H.266 | VVdeC WASM | ~12 fps (single-thread) | Needs 4 threads + SIMD to reach ~22 fps, still drops frames |
Wieckowski et al.’s paper “VVC in the Cloud and Browser Playback: It Works” at ACM Multimedia 2021 is the most systematic public performance assessment of VVC Web decoders. The conclusion: VVC WASM still can’t sustain real-time 1080P playback in 2026.
WASM multithreading depends on SharedArrayBuffer, which requires the site to deploy COOP/COEP headers (Cross-Origin-Opener-Policy: same-origin + Cross-Origin-Embedder-Policy: require-corp). Sites with third-party iframes or image resources need cross-origin isolation, which is operationally complex. iOS Safari restricts SharedArrayBuffer, so mobile WASM multithreading is essentially unavailable.
Frontend Player Libraries
Player libraries wrap MSE/WebCodecs/WASM + rendering + controls + error recovery. The mainstream Chinese choices for surveillance:
| Player | H.265 decode path | 1080P soft CPU | Multi-stream 1080P | Protocols |
|---|---|---|---|---|
| Jessibuca Pro | WebCodecs → WASM → MSE | ~35% | 9 streams | HTTP-FLV/WS-FLV/WebRTC/HLS |
| EasyPlayer.js | WebCodecs → WASM → MSE | ~40% | 16 streams | HTTP-FLV/WebRTC/HLS/WS-FLV |
| libmedia | WebCodecs → WASM → MSE | ~38% | 8–12 streams | HLS/DASH/FLV/RTSP/WebRTC/SRT |
| WXInlinePlayer | WASM (libde265) | ~45% | 4–6 streams | HTTP-FLV/WebSocket |
Chinese players (Jessibuca, EasyPlayer, WXInlinePlayer, libmedia) natively support H.265 with automatic soft/hard decode switching and are the mainstream pick for domestic surveillance dashboards. Foreign open-source options (Video.js, hls.js, flv.js, Plyr) mostly only support H.264; H.265 needs custom work on top of WebCodecs + MSE.
For pure H.264 the choice is wide: hls.js for VOD and live; mpegts.js (WS-TS / HTTP-FLV) for low-latency surveillance; Video.js or Plyr for custom UI.
No mainstream frontend player natively supports VVC. The only options are rolling your own POC based on VVdeC WASM, or waiting for browser-native support in 2027-2028.
Streaming Protocols and Camera Gateways
RTSP is the most common IP camera protocol, but browsers can’t play RTSP directly. A streaming gateway must convert it.
Protocol × codec support
| Protocol | H.264 | H.265 | Typical latency | Web native support |
|---|---|---|---|---|
| WebRTC | Mandatory | Chrome 136+ (Apr 2025, experimental) | 0.2–0.5s | All modern browsers |
| WS-fMP4 | Native | Needs HW decode | 1-2s | Needs MSE |
| HTTP-FLV | Native | Needs extension | 1-3s | Needs flv.js/mpegts.js |
| LL-HLS | Native | Needs HW decode | 2-3s | All modern browsers |
| Standard HLS | Native | Partial | 10-30s | All modern browsers |
WebRTC is the only protocol with sub-second latency; RFC 7742 mandates H.264 (VP8 is also mandatory). H.265 entering WebRTC is a key 2025 milestone — Chrome 136 (released April 2025) began supporting WebRTC HEVC, assuming the client hardware supports it. This opens a window for low-latency 4K surveillance: H.264 4K over WebRTC needs 25 Mbps+ bandwidth; H.265 4K only needs 8–12 Mbps. But Safari and Firefox haven’t followed, so cross-browser capability is uneven.
FLV and H.265 trap: the official FLV spec (Adobe 2009) only defines H.264 codec ID (7); H.265 codec ID (12) is an FFmpeg extension. flv.js doesn’t support H.265 — use mpegts.js or a Chinese player.
Mainstream streaming gateways
| Gateway | Language | H.265 | Web output protocols | Notes |
|---|---|---|---|---|
| SRS | C++ | v6.0+ | HLS/HTTP-FLV/WebRTC/WS-fMP4/SRT | Origin cluster, edge nodes |
| ZLMediaKit | C++ | Yes | HLS/HTTP-FLV/WebRTC/WS-fMP4 | Rich HTTP API, top pick for Chinese surveillance |
| MediaMTX | Go | Yes | HLS/WebRTC/RTSP/RTMP/SRT | Single-binary deploy, simple config |
| go2rtc | Go | Yes | WebRTC/MSE/HTTP-FLV | HomeAssistant integration |
By scale:
- 100+ cameras: SRS v6+, origin cluster + edge nodes.
- 10–100 streams: ZLMediaKit, good C++ performance, rich API.
- Quick POC / edge devices: MediaMTX, single binary, no deps.
- Smart home / HomeAssistant: go2rtc, zero config.
Passthrough vs transcoding cost: passthrough changes only the container (RTSP → fMP4), CPU usage is minimal (1–2%); transcoding re-encodes, and a single 1080P H.265→H.264 software transcode takes 30–50% CPU. Use passthrough in production whenever possible. If the camera is H.265 but the frontend must be H.264, do UA-based routing on the frontend — browsers that support H.265 get the passthrough stream; others get a transcoded stream with reduced resolution (e.g. 720P) to save server load.
Multi-Stream Playback and Degradation
Surveillance dashboards, video walls, and security command centers are the performance edge cases for Web video.
| Hardware | Decode path | H.264 1080P | H.265 1080P | H.266 1080P |
|---|---|---|---|---|
| Intel i5-12400 desktop | WebCodecs HW | 16 streams | 6 streams | 0 streams |
| Intel i5-12400 desktop | WASM soft | 10 streams | 5 streams | 2 streams (not smooth) |
| NVIDIA T4 GPU server | WebRTC + NVDEC | 30 streams | 12 streams | 3 streams |
On desktop, H.264 software decode sustains ~10 streams of 1080P, H.265 only ~5; H.265 hardware decode tops out at 6, clearly fewer than H.264’s 16 — HEVC decoder concurrency is limited by the number of GPU video decoders (typically only 2–3 NVDEC units on desktop GPUs). VVC currently cannot do multi-stream at all.
Bottleneck breakdown:
- CPU: WASM soft decode uses 20–30% of one core per H.264 stream, 40–50% per H.265. An 8-core CPU tops out at ~16–24 H.264 streams or 8–12 H.265.
- GPU: NVDEC unit count caps hardware decode streams. An RTX 3060 has 3 NVDECs, supporting 3 concurrent 4K or 12 concurrent 1080P H.265.
- Memory: 30–80 MB per 1080P decode. 100 streams of H.265 software decode needs ~8 GB.
- Rendering: Canvas/WebGL is a hidden bottleneck. 16 streams can consume ~100% GPU; OffscreenCanvas + Workers are needed to spread the load.
- Network: H.264 1080P@30fps ~4 Mbps, H.265 ~2 Mbps. 100 concurrent H.264 needs 400 Mbps ingress; H.265 needs 200 Mbps.
Recommended config for a 16-stream 1080P dashboard: frontend Jessibuca Pro + WebCodecs-preferred hardware decode + OffscreenCanvas rendering; H.265 streams 1–6 use hardware decode, 7–12 fall back to software + half resolution (540P), 13–16 use static thumbnail rotation; server-side SRS edge + ZLMediaKit origin, regional clusters, 50% bandwidth headroom; browser Chrome 130+ or Edge 120+, GPU acceleration on, power-save off.
Jessibuca, EasyPlayer, and libmedia all offer a “focus stream + thumbnail” mode: the user’s selected 1–4 streams play at original framerate and resolution, the rest drop to 5–10 fps or 540P. This is essential for 16+ stream scenarios.
NAT Traversal and Bandwidth Cost
When intranet cameras and edge gateways need public access, NAT traversal is required. These solutions work below the transport layer and are transparent to the upper-layer video codec — regardless of H.264, H.265, or H.266, the choice depends only on latency, bandwidth, and operational cost.
| Solution | Typical latency | Bandwidth cost | Deploy difficulty | Typical scenario |
|---|---|---|---|---|
| FRP | 20–80 ms | Low (self-hosted) | Medium | Intranet-to-public tunneling |
| WireGuard | 5–30 ms | Very low | Medium | Point-to-point VPN |
| Cloudflare Tunnel | 30–100 ms | Low (CF free) | Easy | Exposing services without public IP |
| Tailscale | 10–50 ms | Low | Easy | Multi-device mesh |
| WebRTC STUN/TURN | 50–200 ms | TURN high (per-traffic) | Medium | Browser P2P |
Bandwidth cost and codec choice
Traversal solutions don’t care about codecs, but codec choice directly drives per-traffic bandwidth cost. TURN traffic, CDN traffic, and FRP bandwidth are all metered by volume.
| Resolution | H.264 bitrate | H.265 bitrate | H.265 saving |
|---|---|---|---|
| 1080P@30fps | 5 Mbps | 3 Mbps | 40% |
| 4K@30fps | 25 Mbps | 15 Mbps | 40% |
At 100 concurrent 1080P streams, 0.5 RMB/GB, 8 hours/day: H.264 costs ~26,400 RMB/month in bandwidth; H.265 ~15,800 RMB/month, a 40% saving. This is the fundamental reason H.265 is in demand for public-network live streaming.
Same logic for metered TURN. Cloudflare TURN at 0.25 RMB/GB: 100 streams of 1080P with H.265 costs ~7,900 RMB/month, H.264 ~13,200 RMB. The precondition is that all client browsers support H.265 hardware decode — in 2026 this precondition is largely met (Chrome 107+/Edge 120+/Safari 11+/Firefox 134+).
Hardware Decoding Ecosystem and VVC Status
Hardware decoding is the ultimate guarantee for HD video playback. Coverage of the three generations:
| Codec | Desktop integrated GPU | Discrete GPU | Mobile SoC | Overall coverage |
|---|---|---|---|---|
| H.264 | 99%+ | 100% | 99%+ | ~99% |
| H.265 | Intel 7th-gen+ | NVIDIA GTX 950+ | Mainstream chips | ~85% |
| H.266 | Intel Core Ultra 200V+ only | No public evidence | MediaTek Pentonic 1000 / Dimensity 9400 | <5% |
VVC hardware decode chips started entering the consumer market in 2024:
| Vendor | Chip | VVC decode | Notes |
|---|---|---|---|
| Intel | Core Ultra Series 2 (Lunar Lake) | 8K@60fps Main 10 | 2024 laptops |
| MediaTek | Pentonic 1000 / Dimensity 9400 | 8K@60fps Main 10 | High-end TVs, flagship phones |
| Apple | — | Unsupported | No current Apple Silicon supports VVC |
Data reliability note: Some sources mention Snapdragon 8 Elite supporting VVC 4K@120fps and NVIDIA RTX 50 series supporting VVC 8K@60fps — but Qualcomm’s official spec sheet only lists H.265/VP9/AV1, not VVC; RTX 50’s VVC support has no public evidence either. Both are excluded from the hardware-decode list for now; verify with the vendor before deployment.
Apple Silicon’s lack of VVC support is the biggest blocker. iOS/macOS users are over 25% of the premium market; VVC browser support can’t pass 50% coverage without Apple. Apple picked AV1 over VVC (M3/M4 chips have AV1 hardware decode).
Whether a browser can invoke hardware decode depends on three layers: chip support → OS exposes an API (Windows Media Foundation / macOS VideoToolbox / Android MediaCodec / Linux VAAPI) → browser exposes it to the Web via codec-string whitelist and decoder implementation. All three are required. VVC has hardware support on Intel Lunar Lake, but neither Chromium nor Firefox implements VVC codec-string parsing, so the frontend can’t use it.
Selection Recommendations
By scenario, primary + fallback:
| Scenario | Primary | Fallback | Key constraint |
|---|---|---|---|
| Max-compat surveillance | H.264 Baseline | H.264 Main | Cover all browsers |
| Low-latency surveillance (1-2s) | H.264 | H.265 (controlled devices) | WebRTC preferred |
| Ultra-low latency (<500ms) | H.264 | H.265 (Chrome 136+) | WebRTC mandates H.264 |
| Large-scale multi-stream (16+) | H.264 | H.265 (when bandwidth-bound) | Hardware decode limit |
| Mobile playback | H.264 | H.265 (iOS/Android flagship) | Mobile WASM is weak |
| Bandwidth-bound public network | H.265 | H.264 (old Firefox downgrade) | Needs browser HW decode |
| 4K/8K ultra-HD | H.265 Main 10 | H.264 High 5.1 | VVC unsupported in browsers |
| Web POC | H.264 | H.265 / H.266 | Controlled devices |
Recommended deployment flow:
- Capability probe: frontend runs a probe on first paint, calling
VideoDecoder.isConfigSupportedandMediaSource.isTypeSupportedto detect H.264/H.265 support. - Codec negotiation: based on probe results, negotiate the pull-stream codec with the server. Browsers that support H.265 pull the H.265 stream for 40% bandwidth savings; others pull H.264 via passthrough.
- Decode path: prefer WebCodecs hardware → fall back to MSE native → fall back to WASM soft (only 720P/1080P single stream) → reject (4K+ without HW decode).
- Render optimization: multi-stream uses OffscreenCanvas + Workers to spread render load; focus stream at original framerate, others reduced.
- Degradation strategy: on hardware-decode failure, auto-fallback to WASM; on WASM CPU spike, drop resolution or framerate; log failures for ops triage.
Watch Items
A few technical events still worth tracking — they affect future selection decisions:
- Firefox HEVC decode quality: Firefox 134+ supports HEVC, but decode performance/latency vs Chrome/Safari still needs measurement, especially for surveillance-dashboard scenarios.
- Apple VVC hardware decode: determines the slope of the VVC coverage curve. Likely in the M5 series around 2026-2027, but current signals point to Apple choosing AV1 over VVC.
- Chrome VVC WebCodecs: progress on the Chromium Issue Tracker is the bellwether for Web-frontend VVC adoption. Experimental status likely begins around 2027.
- AV1 substitution effect: AV1 browser support is already 80%+ and royalty-free. If AV1 hardware-decode coverage grows fast, VVC may never take hold on the Web.
For Web video frontends in 2026: default to H.264, bring in H.265 for specific scenarios, treat VVC as a technology reserve only. Public live streaming and surveillance dashboards primarily use H.264 + WebRTC / HLS; bandwidth-sensitive 4K surveillance and public live streaming use H.265 + WebCodecs (controlled devices); reassess VVC after 2027-2028 once browsers and the hardware ecosystem mature. AV1 is the royalty-free next-gen candidate — track its hardware-decode coverage growth in parallel.