我正在尝试将视频的背景更改为透明。我有红色并使用了几个解决方案，但它们对我使用来自youtube 的视频不太适用。
我使用的解决方案是 1)https://github.com/m90/seeThru 2)https://jakearchibald.com/scratch/alphavid/
这两种解决方案都适用于他们的演示视频，但不适用于我使用的视频。
如果有人可以解释它是如何工作的。所以也许我可以解决这个问题。
这是我得到的结果。
【问题讨论】：
标签： javascript html canvas svg
使用了多种方法。最好的效果是使用添加到视频下半部分的预计算遮罩（在后期制作期间完成）。然后将视频渲染到画布上，并通过获取像素数据并将颜色通道移动到 Alpha 通道来组合两半以创建透明帧。
该过程非常占用 CPU（对于 Javascript），并且仅适用于低分辨率视频。另外，您需要创建动画蒙版并将视频大小加倍。如果您在标准播放器中查看第二个示例，您将看到另一半。
第一个示例使用的第二种方法是动态计算 alpha。这甚至更占用 CPU，但做起来非常简单。同样，如果您有低分辨率视频和快速设备，它是实用的。然后，您将面临设置透明度阈值的问题，因为视频使用有损压缩，您会遇到边缘和阈值颜色问题。
您最好的选择是使用 WebGL 解决方案（如果您不想在后期制作中这样做）并在 GPU 上进行遮罩，您可以在其中使用更复杂的算法和一些时间过滤。虽然这取决于视频质量、背景类型（单色或静态背景）。您还可以找到一个效果更好的 asm.js 解决方案。记得前段时间看过一个，如果能找到我会提供链接的。
不幸的是，JavaScript 暂时还不能胜任实时的高质量遮罩效果。遗憾的是，2D API 只需要一个额外的全局复合操作，“chroma-alpha”（将平均源 RGB 移动到目标 alpha）会打开这么多额外的画布效果（我祈祷上帝发生这种情况？）。现在你必须在 javascript 中移动每个像素
【讨论】：
ctx.getImageData 获取视频的像素数据。然后将像素从下半部分移动到上半部分的 alpha 通道。然后只显示上半部分。他们使用与第一个示例相同的方法。这是第二个视频的链接，因此您可以看到包含下半部分面具的完整视频。 jakearchibald.com/scratch/alphavid/compressed.ogv