0

I’m creating a project for the browser on a Samsung info screen (55”) and I have to show different videos with transparent backgrounds (e.g. smoke) over text. I’ve tried with a webm format but the browser only shows the mask, not the actual movie. I tried with an animated png (apng) but performance is bad. I need your help. What other possibilities do I have?

Kasper Gantzhorn
  • 201
  • 4
  • 12

1 Answers1

0

You may create WebM video file with alpha channel using FFmpeg in command line.

I found an example here.

The following command (for example), generates synthetic video with 70% transparency: 

ffmpeg -y -f lavfi -i testsrc=duration=5:size=320x240:rate=1 -vf format=rgba,colorchannelmixer=aa=0.3' -c:v libvpx-vp9 -crf 10 -b:v 0 vid.webm

The sample is "self contained" (not required an input video file), but simplistic.
Playing the video file vid.webm in a browser, shows that there is transparency.

Rotem
  • 30,366
  • 4
  • 32
  • 65
  • Hi Rotem, thanks for suggesting the WebM format, I already tried it with the traditional video embed, which did not work. So I don't think this will have any effect. – Kasper Gantzhorn Mar 11 '20 at 12:12
  • I have no experience with embedding video. I recommend you to try using `FFmpeg` - it's very simple to execute the command line I posted. You wrote "browser only shows the mask". There is a chance that the mask causes the problem, and not the video. I suggest you to first try it without a mask. In case you like to get more specific solution, you need to post a question that reproduces the problem. If not `WebM` and not `apng`, what are you looking for? – Rotem Mar 11 '20 at 13:38