0

Hey so I found this great post here about how transparent videos are done Can I have a video with transparent background using HTML5 video tag?. So I searched a bit more and found http://www.sciencelifeny.com/transparency/transparency.html# this post with kind of a "tutorial".

I tried to copy that page one to one but couldn't get the video to render in canvas. Then I tried to use "SeeThru" which also wasn't successful. So has anyone tried SeeThru or JakeArchibald.com's technique himself and could tell me what I am doing wrong?

<html>
<head>
    <script type="text/javascript" src="seeThru.js"></script>
</head>
<body>
    <video autoplay="" loop="" id="movingAlphaDemo">
        <source src="kolor.mp4" type="video/mp4">
    </video>
    <canvas width="720" height="1080" class="seeThru-display"></canvas>
    <canvas width="720" height="2160" class="seeThru-buffer" style="display: none;"></canvas>
</body></html>
CrispySeaweed
  • 1
  • 1
  • You will need to do some javascript coding to get it to work. The method is very old and will still tax lower spec devices (depending on video resolution and frame rate). Recently with the adoption of `ctx.filter` property by FF/Chrome (maybe Edge) which supports SVG filters there may be a masking filter (I am not familiar with SVG filters) that will significantly improve performance and reduce complexity to few lines of JS. Else WebGL is an option but video still requires a slow pipeline to the hardware, but once there you can do all sorts of mat FX with ease. – Blindman67 Nov 15 '17 at 13:01
  • If all you want is a static transparent video, you may also consider [webm with alpha channel](https://simpl.info/videoalpha/), supported at least in chrome and FF. – Kaiido Nov 15 '17 at 14:06

0 Answers0