Question

我想创建一个具有透明性的视频，但是由于它已部署在Web上，所以我不能将它作为Quicktime电影。我还需要跨浏览器兼容的东西。

我试图创建一个黑色背景的视频，并在CSS中使用混合模式消除背景，从而产生了透明感。这行得通，但同时也影响了黑色背景上的视频中的艺术。我需要一种可以在背景上创建透明度（alpha）但不会影响其余内容的解决方案，例如在带有alpha通道的QuickTime视频中看到的。

enter image description here

Answer 1

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

Answer 2

您可以使用html5透明视频（例如mp4），将高度加倍，并带有画布和alpha通道。

看一下这段代码：

import RNFetchBlob from 'rn-fetch-blob'

const preSignedURL = 'pre-signed url'
const pathToImage = '/path/to/image.jpg' // without file:// scheme at the beginning
const headers = {}

RNFetchBlob.fetch('PUT', preSignedURL, headers, RNFetchBlob.wrap(pathToImage))

我曾经在网页上使用过一次

        (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);


        })();

我找到了一个透明的视频示例供您尝试，某处有一些指示，但我似乎找不到了，它在jakearchibald.com上，也许说明也在那里。

如何获得网络的视频透明度？

2 个答案: