search

jakearchibald / stacked-alpha-video

Apache License 2.0
100 stars 4 forks source link

Just wanted to say thank you ❤️ #4

Open T-Damer opened 3 months ago

T-Damer commented 3 months ago

I've been struggling with transparent video in Telegram Mini Apps (or Telegram Web Apps) (I tried most popular formats - .avif, .gif, .webm, .apng) - none of them worked, except your library, thank yarrr ❤️

p.s: make sure to convert from .mov with transperancy, I tried to convert from webm with transperancy and hevc gave no mask at all (maybe it's worth mentioning in readme, because sometimes it's hard to understand from preview, if your video is transparent or has white background instead of transparent layer)

T-Damer commented 3 months ago

Oh and for some reason I wasn't able to use it with preact (to register it as a component), so I did this:

import 'stacked-alpha-video'

type StackedAlphaVideoProps = JSX.HTMLAttributes<HTMLElement>

const StackedAlphaVideo =
  'stacked-alpha-video' as unknown as FunctionComponent<StackedAlphaVideoProps>

Maybe I did something wrong during component registration, but anyway

jakearchibald commented 2 months ago

I tried to convert from webm with transperancy and hevc gave no mask at all

Huh, could you give me an example webm that does this? I'm surprised the data is lost.

Oh and for some reason I wasn't able to use it with preact

https://stackblitz.com/edit/preact-tsx-starter-jutujv?file=index.tsx,App.tsx,style.scss - here's a Preact app that uses the component. It might be the types in index.tsx that you were missing.