canPlayType said ‘probably’ in three engines; only two kept my transparent WebM transparent
A cut-out presenter floating over a product page, person only, no rectangle, the page showing through, is the kind of request that reaches a frontend team sooner or later. The obvious deliverable is a transparent WebM, and the obvious way to decide whether the browser can handle it is canPlayType . I ran both through three engines before I'd estimate it, and the feature check turned out to be the…
A presenter cut-out, floating over a product page, is the kind of request that often reaches a frontend team. The obvious deliverable is a transparent WebM, but the browser's ability to handle it is tested using canPlayType. Three engines were tested – Chromium 149, Firefox 151, and WebKit 26.5, with Playwright's bundled browsers.
The probe draws the frame into a canvas and reads the alpha of two 40×40 corners, ensuring transparency survives decoding in Chromium and Firefox. However, WebKit returns black pixels, dropping the alpha channel. All three engines answered "probably" to canPlayType(video/webm; codecs= vp9 ), but canPlayType doesn't count as a check.
After conversion to MP4 or creating a GIF, the result is also black, indicating transparency is lost. The WebM overlay works for Chromium and Firefox, but for WebKit-based browsers, a separate MP4 with the background composited in the page color is recommended.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
