为什么将 html5 画布放在不覆盖视频的视频上，而不是画布显示没有彩色背景，视频冻结为单帧

Question

我希望你能给我几分钟的时间。我正在尝试实现一个深色背景画布来掩盖其背景中的视频，下面的代码应该能够通过填充样式和源来做到这一点，但由于某种原因它不是，你有一个想法如何解决这个问题？

let canvas = useRef(null);
    const size = useWindowSize();
    const { currentTheme } = useGlobalStateContext()

    useEffect(() => {
        let renderingElement = canvas.current;
        let drawingElement = renderingElement.cloneNode();

        let drawingCtx = drawingElement.getContext("2d");
        let renderingCtx = drawingElement.getContext("2d");

        let lastX;
        let lastY;

        let moving = false;

        renderingCtx.globalCompositeOperation = "source-over"
        renderingCtx.fillStyle = currentTheme === "dark" ? "#000000" : "#ffffff";
        renderingCtx.fillRect(0,0, size.width, size.height)
        console.log(renderingCtx)

    }, [])
  return (
    <Banner>
      <Video>
        <video
          height="100%"
          width="100%"
          loop
          autoPlay
          src={require("../../assets/video/video.mp4")}
        />
      </Video>
      <Canvas
        height={size.height}
        width={size.width}
        ref={canvas}
      />
      <BannerTitle variants={container} initial="initial" animate="animate">
        <Headline variants={item}>DIG</Headline>
        <Headline variants={item}>DEEP</Headline>
      </BannerTitle>
    </Banner>
  )
}

================================ 我正在使用样式化组件，

import styled from "styled-components"
import { motion } from "framer-motion"

//Banner
export const Banner = styled.div`
  background: ${props => props.theme.background};
  height: 100vh;
  width: 100%;
  position: relative;
  margin-bottom: 296px;
`
export const Video = styled.div`
  height: 100%;
  width: 100%;
  video {
    object-fit: cover;
  }
`
export const Canvas = styled.canvas`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: block;
`

此代码块为画布应用深色背景，以便遮盖其背后的视频 但不是覆盖视频（屏幕会变暗，视频将在后台播放）而是显示其他内容

这是最终结果的图片

Answer 1

好吧，由于一些新的安全修复程序，视频的 autoplay 无法正常工作。 Read more 并且您需要在 HTMLMediaElement 上具有 muted 属性。

我在视频上创建了一个事件侦听器，以便在它开始播放时删除muted 属性。我传递了once 选项，因此事件将被调用一次。

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


video.addEventListener('play', _ => {
  console.log('playing');
  canvas.width = getComputedStyle(video).width.slice(0, -2);
  canvas.height = getComputedStyle(video).height.slice(0, -2);
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}, { once: true });

body {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

video {
  width: 75vw;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" muted autoplay controls></video>
<canvas id="canvas"></canvas>