I’m trying to import a masked video onto my site for use as shots - for context, its an oval shaped video that will sit on top of a vintage TV set, and look like the screen is playing the video on mouseover. I’ve converted my video (with alpha channel) into a webm file, and when I open the file in chrome I can see it’s rendering correctly as an oval shape. However when I upload the webm file as a shot, it shows up as a square shape. Can anyone help me solve this?
I would guess, that the shots widget isnt set up as a pure html5 video, in which you can set the right codec to use alpha channel. I also read, that you have to deliver the videofile as two different formats, to reach crossbrowser functionality.
But just an idea without knowing your exact build: What, if you place the video in the background and above that your “vintage TV” set as a png with a transparent tvwindow.
Or, if its only about the “hover” functionality you use the shots widget for, just implement it as html5video with alpha channel and set up a javascript “if hover: play” script for it.
The problem with that was that my png for the tv is part of a giant background image so it was way too big as a png. However, I think I found a workaround for this issue! Ended up cutting up 100 individual images from the video sequence and I’m about to put them into shots as PNG files instead. A bit annoying, but hopefully will do the trick. Thank you for your suggestion!
1 Like
Yon can export the film (from DaVinci, Premier or other) as PNG sequence. First time you do this, test that your PNG is done right, with the alpha settings and it is transparent! Drag the PNG sequence into shots, and you have a film with transparent background in no time!
1 Like