1

I hope you could give me a few minutes of your time. I am trying to implement a dark background canvas to cover up a video in its background, the code beneath should be able to do that with fill style and the source over, but for some reason it is not, do you have an Idea of how to solve this?

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>
  )
}

=============================== i am making use of styled components,

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;
`

This block of code is applying a dark background to the canvas so it can cover up the video behind it but instead of covering the video up (the screen would be dark and the video will be playing in the background) instead something else shows

This is the image of the final result

4

1 回答 1

0

好吧，autoplay由于一些新的安全修复程序，视频无法正常工作。阅读更多，您需要muted在HTMLMediaElement.

我在视频上创建了一个事件侦听器，以便在它开始播放时删除该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>

于 2021-04-07T20:44:45.093 回答