Dual-zone gesture HUD on a canvas: brightness, volume, seek with zero DOM (and zero battery tax)

Most webview video players do gestures the lazy way: absolutely-positioned DOM overlays, a JS hit-test on every touchmove , rAF loops that never stop. On a 2 GB RAM budget phone in India, that means the main thread wakes up dozens of times a second just because your thumb moved. I wanted none of that.

So the HUD in my player is a single <canvas> painted over the <video> element. No DOM nodes for the overlay, no persistent animation loop.

How it works

One pointerdown splits the screen into zones: left half = vertical drag for brightness, right half = vertical drag for volume. Horizontal drag anywhere = seek, with a live time label. Double-tap right/left = skip 10 s. Long-press = 2x speed. Tap = play/pause.

The canvas only repaints while a finger is down. requestAnimationFrame is requested on pointerdown and cancelled on pointerup .…