我想创建一个具有透明度的视频，但我不能让它成为 Quicktime 电影，因为它是在网络上部署的。我还需要跨浏览器兼容的东西。
我尝试创建一个黑色背景的视频，并在 CSS 中使用混合模式来消除背景，从而产生透明的错觉。这行得通，但它也影响了视频中位于黑色背景之上的艺术。我需要一个能够在背景上创建透明度 (alpha) 但不影响其余内容的解决方案，例如使用带有 alpha 通道的 QuickTime 视频。
【问题讨论】：
标签： css html video transparency alpha
您可以使用 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);
})();
我在网页上使用过一次：
<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 动画而不是视频吗？
【讨论】：