使用Alpha通道视频屏蔽HTML内容

我正在尝试在后效中实现当前可能的效果，效果是关于剪辑屏蔽（luma matte）一个视频与另一个视频，因此最终输出将是透明视频。但我正在尝试创建一个动态透明的HTML内容

视频看起来像这样：

基本上通过改变透明度来显示HTML内容

这一定是关于+，但在谷歌搜索了大约一个小时后，找不到任何能够描述黑白视频的内容和效果，从而改变HTML内容透明度的内容

---

有什么想法吗？

你的示例视频中的白色区域越来越多地被逐渐消失的黑色区域显示出来

您可以使用现有的视频+画布显示底层html内容。

创建包含已制作视频的视频元素

使用计时器抓取播放视频的帧<强烈建议使用code>requestAnimationFrame，因为它与显示刷新同步

在每个动画循环中，在画布上绘制一帧视频。您可以在画布上绘制视频，因为画布可以使用视频元素作为其图像源

一旦您的黑雾框架位于画布上，您可以通过以下方式使画布的任何白色区域透明：

• 使用

  context.getImageData

• 如果任何像素的颜色为“白色”，则可以将该像素的alpha更改为0（表示透明）

• 使用

  context.putImageData

因此，总体而言：

• 隐藏正在播放的视频元素

• 使用CSS将画布元素放置在希望显示的html内容上

• 创建动画循环，在画布上绘制视频帧，并将白色像素转换为透明

• html内容将在画布上显示，播放视频帧时，白色像素将完全透明

---

HTML5不支持alpha通道视频（如MOV 32位等）

唯一的选择是使用哑光合成像你的视频与画布元素相结合。但是，仅画布合成已存在的alpha通道，并且由于蒙版是实心层而不是alpha，因此必须将其转换为alpha

这意味着您必须绘制每个帧并将其迭代到画布，然后将灰度转换为透明度级别。但是，这是非常CPU密集型的，会影响计算机性能/资源。视频还必须满足CORS要求，以避免污染画布（在这种情况下，您无法提取像素）

这里是如何 对于每个帧：

• 为每个像素从任何通道获取一个级别，我们将在这里使用红色
• 从255中减去该值，因为此处的哑光白色将是目标（反转，将显示）
• 清除图像数据，即蒙版本身，否则会使白色蒙版泄漏到数据中
• 将计算值设置为新的alpha通道值

示例循环（假设视频是动态创建的，设置了源并触发了启动事件-画布放置在您想要屏蔽的位置，并且上下文

ctx

已初始化）：

ctx.globalCompositeOperation=“复制”//将清除以前的alpha
函数unmask（）{
drawImage（视频，0，0）；//绘制当前视频帧
var idata=ctx.getImageData（0,0，ctx.canvas.width，ctx.canvas.height），
data=idata.data，
len=data.length，i=0；/…画布上的图像数据
而（我

---

加速提示：使用黑色（或预反转蒙版视频），然后在数据上使用UINT32阵列视图，右移一个像素长的单词（到目前为止，其他答案都假设为2D画布上下文。使用WebGL可以更高效地完成这一任务。这样，所有实际工作都在GPU中完成

你需要一个片段着色器，它基本上完成了循环在Ken Fyrstenberg的答案中所做的工作：找到每个像素的亮度，从最大值（1，以GLSL表示，而不是255）中减去它，并将其用作alpha值。我将跟随他的思路，在（a）中使用绿色通道作为亮度，以及（b）将输出颜色通道设置为黑色。我将这样做：

precision lowp float;
uniform sampler2D sampler0;
varying vec2 v_texCoord;
void main(void) {
  vec4 color = texture2D(sampler0, v_texCoord);
  float alpha = 1.0 - color.g;
  gl_FragColor = vec4(0.0, 0.0, 0.0, alpha);
}

然后，对于每一帧，将一个矩形渲染到WebGL画布上，并将视频作为纹理源和上面的片段着色器。我已经开始编写一个如何执行此操作的示例，但这需要一些工作。有多少兴趣？让我知道，如果有足够的需求，我会尝试完成。

---

编辑：通过使用，您可能不必学习太多关于WebGL的知识。我还没有深入研究过它，但我认为可以将其用作视频作为图像源。

下面是另一个示例，如上面的链接：>“画布放置在您要屏蔽的位置，上下文ctx已初始化”-因此，如果我想屏蔽整个页面，我会将所有内容放入标记中，对吗？@DavidS。正确，请记住设置其大小。在这种情况下，您可能会将其设置为视频大小，然后使用CSS填充其余内容。谢谢，我会尝试一下！如果我成功，我会将其发布在这里。显然，Chrome和Opera确实支持alpha channel在视频中，正如中所指出的。另外，CSS Cust

precision lowp float;
uniform sampler2D sampler0;
varying vec2 v_texCoord;
void main(void) {
  vec4 color = texture2D(sampler0, v_texCoord);
  float alpha = 1.0 - color.g;
  gl_FragColor = vec4(0.0, 0.0, 0.0, alpha);
}