TIL 2: How to add a transparent video to a web page

Today, I released the PRAUXY GO launch page. For history's sake, here is a screenshot:

PRAUXY GO Launch Page

This time, I decided to try something new. While making the launch video, I was creating a word cloud and thought: how could I put this word cloud in the header of the launch page? In my opinion, it'd make the page pop a little bit more than usual. For those of you who haven't seen the PRAUXY GO launch video, here it is:

Interested in #coding on your iPad?

Today, I'm opening the waiting list for #PRAUXYGO, a revolutionary iPad IDE for #developers.

This #IDE currently supports #NodeJS and most things #webdev, but the language support is growing 🔥#code on an #ipadhttps://t.co/3GRTrDHTyj pic.twitter.com/wxirJB7QqY

— Kenton (@kvizdos ) June 15, 2020

My first thought to creating a video in the header was to use an animated GIF, however I quickly learned that they do not support transparent backgrounds :(

Feeling a little stumped, I took a break and came back after a little while. After remembering creating some transparent videos before for some OBS overlays, I took to Google and learned about transparent webm's using VP8 and VP9 encoding. There we go!

After I learned about that, I downloaded a questionable extension for Adobe After Effects and exported a new transparent webm file. Wahooo! While looking over the docs, I did notice that the browser compatibility was a little lacking, but not horrible. Overall, it didn't have support for IE and Safari, but using the HTML video tag's poster attribute, I managed to create some workarounds.

Webm browser compatibility as of 6/15/2020

So, once I exported my video and moved it into an assets directory, I started writing some video tags.

<video autoplay muted>
    <source src="assets/cloud.webm" type='video/webm'>
</video>

Aaaaannnd when I checked the website... it didn't work. Nothing showed. I was rather confused. Turns out, you to add a few things to the type attribute as of now because of compatibility. Without adding the codecs piece to the type attribute, it will not work.

<video autoplay muted>
    <source src="assets/cloud.webm" type='video/webm;codecs="vp8, vorbis"'>
</video>

Nowwwwww, it still didn't work, but at least it displayed an initial frame. It would play if I added controls to the video and manually played it, but as many of you know, Chrome is heavily restricting the amount of autoplay content out there.

Now I was very stumped, so I did the only right thing to do: searched Google. I came across this answer on StackOverflow https://stackoverflow.com/a/56972239/6457558.

After changing up my code to reflect it, I got this:

<video onloadedmetadata="this.muted = true" playsinline autoplay muted>
    <source src="assets/cloud.webm" type='video/webm;codecs="vp8, vorbis"'>
</video>

It turns out, Chrome (and most browsers) do not play video until a page is interacted with (and more specifically, the exact element). The work around? Muted video. But, just adding muted gets most browsers, but not all of them, so you need to manually set some object variables on the metadata load.

If you do some testing now, you'll realize it works really well on most browsers, but Safari and IE are still lacking behind. To fix this, I remembered that you can supply a poster attribute to a video tag. This allows the browser to fall back to a different image if the video fails to load and it'll also show before content plays as it loads the video (especially if you enable manual starting w/ controls).

Oh, and as some of you are probably wondering: doesn't this add a ton of weight to a website? Well, not exactly. My video was simply 1.5 seconds at 24 fps @ 1280x720 (I chose 1280x720 because I knew it would never be displayed full screen. I'm sure I could reduce the size more if I needed to) with a grayscale coloring. In my use, the file ended up being 298 KB! Comparing that to a still frame I used as the poster which was 226 KB, I'd say it's not too horrible. You can always lazy load these or simply not display them on slow connections if you see fit. Als0, I feel like there is a very small use case for when to actually use videos, and when you do I really don't think it should be a long one, especially on a web page (unless your site is made for content delivery, most things can be done with CSS animations now adays. I was just lazy).

Word cloud image for reference (226 KB)

Pretty simple TIL today, but it's one of those things that I'm sure one day, for a very oddly specific need, I will need to come back to. And hopefully, I helped one of you!

Any feedback is greatly appreciated, tweeting me, @kvizdos , is the best way to do so!

Thanks for reading & a share never hurts :)