{
  "id": 7505579,
  "title": "canPlayType said ‘probably’ in three engines; only two kept my transparent WebM transparent",
  "url": "https://urgent.news/2026/09/15/canplaytype-said-probably-in-three-engines-only-two-kept-my",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-15T08:04:17.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/iterandum/canplaytype-said-probably-in-three-engines-only-two-kept-my-transparent-webm-transparent-1ma4"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}