Install the latest version of FFmpeg here. Here’s how to do that: Installing FFmpegįirst, we’ll need an app that can convert between video formats. If you want to geek out, you can install FFmpeg and do the conversions yourself. Here’s some good news for you: We built a small, free tool that converts to both alpha transparency formats in one go! It’s simple enough to download and use, but you can also check out our guide to using Rotato Converter. We now have 50% of the videos we need, so we’re halfway there! Next up, we’ll convert that HEVC video to VP9 so Chrome has something to play. If it doesn’t support it directly, like Rotato, go for the HEVC With Alpha, then convert to WebM, as described below. If your video app supports VP9 with transparency, choose that.This file will be our Safari-ready movie. First, export your HEVC with alpha, and call it movie-hevc.mov.In Rotato, 720p is often big enough for a short video. (If you’re using Rotato, here’s how to get one) What to exportīefore you do anything, make sure your video isn’t too big, as you’ll be playing it on the web directly. The first thing you need is a video with an alpha channel. Now what? You guessed it: We’ll have to provide *both* formats and let each browser choose. Chrome supports VP9 with alpha, and Safari does not.Safari supports HEVC with alpha, and Chrome does not.Apple and Safari want to stick to the MPEG standard, so they support HEVC (H265). Google and Chrome think open source is fantastic, so they made their own open-source format. So why isn’t this simple? Long legal story short: There are two significant browsers from two big companies. We’ve had transparent video formats for years. The big question is now: What if the background is not abstract? What if you want to play your video on top of rendered HTML, like in the first example? For that, we need a bigger knife. It works because the background is abstract and nicely blends with the site’s background. So that’s one workaround - smoke and mirrors. Then, they matched the background color with the color under the text and used the new, combined video as the background element. The Typeform designers combined the UI video on top of the background video into one video. And to top it off, they even have a video running below the video. The elements shrink and grow like it’s no big deal. See how they have two videos going on here? On the top layer, there’s a video showing their product. Your answer decides if we can go the easy way or the slightly more brutal way. Under your video, the big question that will determine our path as we advance is: what do you want to use as a background? So, the blue box is your website, the red box is your transparent video, and the green box is your optional foreground, which might be a video. In this post, I’ll show you how to do this and how to cheat and make a shortcut using smoke and mirrors. Maybe because it’s just not supported - in an obvious way. Here’s a more straightforward example ( demo page) ( codePen) Why isn’t transparency used more? See the live site here and the Webflow project here. What’s an example of alpha transparency on the web? What’s an example of alpha transparency on the web?.On top of that, the results look great and will set your project apart from those flat, boxy videos everyone else has. It’s as if someone decided a long ago that we won’t need this. And how do you even make a transparent video - a video with an alpha channel - in the first place? And if you do find out, how do you double-check that it is, in fact, transparent? It’s not a friendly environment. You may have even tried a Youtube embed or a Video tag and found that, nope, that didn’t work either. This post is a part of our series called The Big Guide to Transparent Backgrounds in videos and images
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |