Recently I’ve been researching how to make transparent HTML5 video.
Last week I experimented with using HTML Canvas with a green pixels transparent. This allowed me to turn green screen videos transparent. It was an fun experiment, but I wasn’t really satisfied.
Full Alpha Channel Video Transparency
Today I found a plugin called SeeThru.js that allows you to have full transparency by stacking your color video with an alpha channel.
How To Make The Video File
Full credit for these instructions goes to sciencelifeny.com. You can read his full instructions here.
1. In After Effects make a video with tranparancy.
2. Export one video in RGB
3. Export a second video using Alpha
4. Make a new composition twice the height of the originals
5. Import the first 2 videos and stack them on top of one another.
6. Export.
You’ll end up with a video like this one…
Credit for this video goes to @shshaw on Codepen.io.
The HTML Code
Upload your video to a server and add the following code.
<video id="video" src="" autoplay loop muted playsinline crossorigin="anonymous">
</video>
<script src="https://www.monsonproductions.com/seeThru.js?v3"></script>
<script>
// ==================================================
// Using it
// <video playsinline muted autoplay loop></video>
// ==================================================
const video = document.querySelector('#video');
video.addEventListener('loadedmetadata', ()=> {
seeThru.create(video);
});
loadAsObjectURL(video, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/spaceships.mp4');
function loadAsObjectURL(video, url){
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (response) => video.src = URL.createObjectURL(xhr.response);
xhr.onerror = () => { /* Houston we have a problem */};
xhr.open('GET', url, true);
xhr.send();
video.onload = () => URL.revokeObjectURL(video.src);
}
</script>
By adding the following javascript, a canvas will automatically be added directly after the Video.
Replace the code highlighted in Red with your own video.
Download SeeThru.js
I also strongly recommend you host the javascript file on your own servers.
Hiding the Original Video
In the original SeeThru.js code the video is hidden by using display:none; but I’ve changed that in my version, because it prevents the animation from playing in iOS.
But you can make the video super tiny and transparent.
For this example I’ve made the video fairly small and almost transparent.
But you can make it totally disappear with the following code…
<style>
#video { width:1px; height:1px; opacity:0; }
</style>
Will it Load Fast?
That’s a good question.
SeeThru.js is 25kb unminified.
While the spacehip video is 728kb and the moving shapes video is 252kb.
That’s not bad considering the nature of what we’re doing. But you’ll have to consider what makes the most sense for your project. If all you need is some simple movement, CSS animations will probably serve you better. But if you need something more complex, this can be a potentially smart solution.
Your Thoughts
Did this work for you? Do you have any suggestions to make it better?
Let us know in the comment section below…