Transparent videos are a versatile and powerful tool for video creators. They can be used to create overlays, transition effects, and other creative effects that would not be possible with traditional video. After Effects is a powerful video editing software that allows users to make and export transparent videos.
To be able to use a transparent video on your website, there are 2 phases that you need to go through. First is rendering of the MOV, a massive lossless file format, and second is converting this file to a more web–friendly file format called “WebM”. WebM works very well on PC and Android devices but not on Apple devices, so we are also going to show another step you must take to make it.
Step 1: Export the file
After doing the necessary editing, you should export the file. Click “File > Export”.
Ensure you are hiding any solids, as we want to ensure you are exporting it as a transparent video.
Step 2: Click your composition name
Step 3: Select QuickTime format
Under output module settings, select “QuickTime” as the format.
Step 4: Select RGB+Alpha
Step 5: Change Format Options
The last setting to change is Format Options: Make sure it is in “Apple ProRes 4444”.
(Note: Quicktime RGB+Alpha default codec will work for Windows devices; you must change this to Apple Pro Res 4444 if you want to use this transparent file on a MAC device).
Then press “Okay”.
Step 6: Press "Output to"
Press “Output to”, then it’s up to you to specify in which directory you want your video to be exported.
The resulting file should look like this.
“It’s transparent, but it’s a massive file (500 MB for a 26-second transparent video)!
Now it’s time for Phase 2. MAC and Windows have different Phase 2. The goal of Phase 2 is to compress this massive file and make it web-friendly, which works on all Operating Systems.
Phase 2: (For Windows devices) - Compression to WebM
What is webm?
WebM is an open, royalty-free media file format designed for the web. It is primarily intended to offer a royalty-free alternative to use in the HTML5 video and the HTML5 audio elements. It has a sister project, WebP, for images.
It will be a little bit more technical at this stage but follow step by step, and you will get the same result.
Next, Open CMD. Click the Windows button, then search for “CMD”, then open it.
Go to where your ffmpeg folder bin directory. Copy file path then in CMD type “cv <<paste your copied file path>>”
Then, paste this code to CMD. “.\ffmpeg -i “inputvideo.mov” -c:v libvpx-vp9 outputvideo.webm“.
Note: Make sure to change the text after –i to the name of the video exported in MOV.
Note: The text after –i refers to the input video name, which we named “transparent walk animation.mov”. The text after -c refers to the output video name in webm format.
However, the input video name must not contain spaces. So, I will rename our video file from transparent walk animation.mov to transparentmov.
In our case, I will change the code to: “.\ffmpeg -i “transparentmov.mov” -c:v libvpx-vp9 transparentwebm.webm“
Read more about WebM. Click here!
Phase 2: To encode a media file to HEVC/H.265 with preserved transparency on a Mac/Apple device, you can use the following steps:
What is HEVC/H.265?
HEVC, or H.265, is a widely accepted and supported video format now. It is a new video codec capable of high compression while quality is preserved. Compared to other formats, such as H.264, it could store a 1-minute 4K video with less file size.
Before proceeding with the encoding, it is important to check the media file codec and format to see if it is compatible with encoding. To start:
Click “Get Info”.
Once done with checking the media file’s compatibility for encoding, encoding can be started.
Select “Services” and click Encode Selected Video Files.
Once selected, tick the box “Preserve Transparency”. This will allow the media file to be converted with a transparent background.
Click Continue, and the Encode Media window closes.
Wait for the file to be encoded, as it will appear beside the original file. The media file has completed its encoding once it is renamed name_of_file-1.mov, and it is ready for web development usage.
This workflow was inspired by developers who wish to use transparent videos in developing their websites. WebM transparent videos are not yet compatible with Apple devices.
So, if you view them on your website using Apple devices, you might see them with a black background. That’s where the other format comes in. Apple’s WebM equivalent is the lightweight and website-friendly HEVC format.
The dev could then add a script to show one or the other depending on the device used to visit the website. And users from any device should be able to view your output as it should be.
Hope this helps!