一、真人快打官网的具体实现方式 #

该网站没有使用带Alpha通道的视频格式（如WebM），而是通过CSS混合模式实现视觉上的黑色背景透明，核心逻辑如下：

1. 给视频的父容器设置纯黑色背景
2. 给<video>元素添加mix-blend-mode: screen样式

原理说明 #

screen混合模式的计算规则是：将视频像素的RGB值与背景色的RGB值分别转换为百分比后，用1减去两者的乘积，再转回RGB值。对于纯黑色（RGB(0,0,0)），计算后结果为透明；视频中的非黑色内容则会正常显示，从而实现“抠掉黑色背景”的效果。

核心代码示例：

.character-video-wrapper {
  background-color: #000;
  /* 其他布局样式 */
}
.character-video-wrapper video {
  mix-blend-mode: screen;
  /* 其他视频样式 */
}

二、去除MP4视频黑色背景的通用方法 #

方法1：CSS混合模式（无需修改视频文件） #

适合视频背景为纯黑/深色的场景，是成本最低的方案：

• 若背景为黑色：使用mix-blend-mode: screen，搭配黑色容器背景
• 若背景为白色：使用mix-blend-mode: multiply，搭配白色容器背景
• 优化技巧：如果视频黑色不够纯净，可通过filter属性强化对比，比如filter: contrast(1.3) brightness(0.8)，让混合效果更精准

方法2：视频文件抠像（永久去除背景） #

如果需要更稳定的效果或适配旧浏览器，直接修改视频文件：

1. 专业软件处理：用Premiere、After Effects的色键抠像工具，选中黑色背景进行去除，导出带Alpha通道的视频（推荐WebM VP9格式，兼容性优于带Alpha的MP4）
2. 开源工具批量处理：用FFmpeg的chromakey滤镜实现自动抠像，命令示例：

   ffmpeg -i input.mp4 -vf "chromakey=black:0.2:0.1" -c:v libvpx-vp9 -pix_fmt yuva420p output.webm
   

   参数说明：0.2是颜色相似度阈值，0.1是透明度阈值，可根据视频调整。

方法3：Canvas实时像素处理（复杂场景） #

如果视频背景不是纯色，可通过Canvas API逐帧处理像素：

1. 读取视频每一帧的像素数据
2. 检测并将接近黑色的像素设置为透明
3. 渲染处理后的帧到Canvas

核心代码示例：

const video = document.getElementById('source-video');
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');

video.addEventListener('play', () => {
  const processFrame = () => {
    if (video.paused || video.ended) return;
    // 绘制原始视频帧
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 获取像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;

    // 遍历像素，将接近黑色的像素设为透明
    for (let i = 0; i < pixels.length; i += 4) {
      const r = pixels[i], g = pixels[i+1], b = pixels[i+2];
      // 阈值可根据视频调整，这里取RGB值都小于30的像素
      if (r < 30 && g < 30 && b < 30) {
        pixels[i+3] = 0; // 设置透明度为0
      }
    }

    // 渲染处理后的帧
    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(processFrame);
  };
  processFrame();
});

内容的提问来源于stack exchange，提问作者BlackStar1991