Css 如何为web获取视频透明度？

我想创建一个透明的视频，但我不能让它成为Quicktime电影，因为它正在网络上部署。我需要的东西是跨浏览器兼容也

我试图创建一个黑色背景的视频，并使用CSS中的混合模式来消除背景，创造出透明的错觉。这是可行的，但它也影响了黑色背景之上的视频艺术。我需要一个解决方案，将工作，以创造透明度（阿尔法）的背景，但不影响其余的内容，如看到与QuickTime视频与阿尔法频道

---

恐怕这是不可能的。我也在搜索，搜索，搜索。。但是看看你的图像：你不能创建一个CSS动画而不是视频吗？

你可以使用html5透明视频，例如mp4，高度加倍，带有画布和alpha通道

请看下面的代码：

        (function () {
            var outputCanvas = document.getElementById('output'),
                output = outputCanvas.getContext('2d'),
                bufferCanvas = document.getElementById('buffer'),
                buffer = bufferCanvas.getContext('2d'),
                video = document.getElementById('video'),
                width = outputCanvas.width,
                height = outputCanvas.height,
                interval;

            function processFrame() {
                buffer.drawImage(video, 0, 0);

                // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
                var image = buffer.getImageData(0, 0, width, height),
                    imageData = image.data,
                    alphaData = buffer.getImageData(0, height, width, height).data;

                for (var i = 3, len = imageData.length; i < len; i = i + 4) {
                    imageData[i] = alphaData[i - 1];
                }

                output.putImageData(image, 0, 0, 0, 0, width, height);
            }

            video.addEventListener('play', function () {
                clearInterval(interval);
                interval = setInterval(processFrame, 40)
            }, false);

            // Firefox doesn't support looping video, so we emulate it this way
            video.addEventListener('ended', function () {
                video.play();
            }, false);


        })();

（函数（）{
var outputCanvas=document.getElementById（'output'），
output=outputCanvas.getContext（'2d'），
bufferCanvas=document.getElementById（'buffer'），
buffer=bufferCanvas.getContext（'2d'），
video=document.getElementById（'video'），
宽度=outputCanvas.width，
高度=outputCanvas.height，
间隔
函数processFrame（）{
drawImage（视频，0，0）；
//这可以在没有alphaData的情况下完成，但Firefox不喜欢图像大于画布的情况
var image=buffer.getImageData（0，0，宽度，高度），
imageData=image.data，
alphaData=buffer.getImageData（0，高度，宽度，高度）.data；
对于（变量i=3，len=imageData.length；i

我曾在一个网页上使用过：

<div class="IntroVideo" id="canvas_output">
    <video id="video" style="display:none;" autoplay crossorigin="anonymous">
      <source src="https://jakearchibald.com/scratch/alphavid/compressed.mp4" type='video/mp4' />
     </video>
     <canvas width="920" height="1300" id="buffer" style="display: none;"></canvas>
     <canvas width="920" height="650" id="output" style="display: inline-block;"></canvas>
</div>

我找到了一个透明的视频示例供您尝试， 某处有一些指示，但我似乎再也找不到了，

---

在jakearchibald.com上也许也有说明

谢谢！我问了一些和我一起工作的开发人员，他们也说了同样的话。他们也推荐CSS，但是当您编写类似的代码时，您就打开了在不同浏览器/设备中进行测试和调试的大门，这是我在本项目中避免的。因此，我最终在AfterEffects>将其导出为PNG动画>压缩PNG文件>中创建动画，然后使用Canvas设置动画。：-）