视频背景用Canvas做视频背景用Canvas实现视频背景用Canvas实现视频背景用Canvas实现视频背景用C

重点在`if (!canvas)`里面的最后一行，其他的稍微看看注释就明白了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>BadApple</title>
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="text/javascript">
      // 视频播放之前调用的方法,吧视频标签传递进去，默认字体大小
      function renderVideoFrame(videoDom) {
        // 准备宽和高 宽度和高度为视频标签的一半
        var videoSize = {
          width: parseFloat(videoDom.videoWidth),
          height: parseFloat(videoDom.videoHeight),
        };
        // 生成一个canvas
        var canvas = document.querySelector("#canvas");
        // 如果没有东西就证明没有生成这个canvs，所以就生成一个canvas出来
        if (!canvas) {
          canvas = document.createElement("canvas");
          canvas.id = "canvas";
          // 宽高和视频一样
          canvas.style.width = videoDom.style.width;
          canvas.style.height = videoDom.style.height;
          // 给上定位和层级
          canvas.style.position = "absolute";
          canvas.style.zIndex = 1;
          canvas.style.left = canvas.style.top = "0";
          canvas.width = videoSize.width;
          canvas.height = videoSize.height;
          // 给body添加一个子集的canvas
          // 这里具体添加到谁哪里去
          document.body.appendChild(canvas);
        }
        // 指定画布绘制的类型，目前只能绘制2d类型的画面
        const ctx = canvas.getContext("2d");
        // 向画布上绘制想要绘制的图片 后面传的0 0是x和y的定位，在后面的width和height是宽和高 是style里的宽和高
        ctx.drawImage(videoDom, 0, 0, videoSize.width, videoSize.height);
      }
      // 初始化视频
      function init() {
        // 生成一个视频标签 给视频标签添加上一些属性
        var videoDom = document.createElement("video");
        videoDom.src = "./bg.mov";
        videoDom.style.width = "100vw";
        videoDom.style.height = "100vh";
        videoDom.muted = true;

        // 监听视频的播放之前  在视频准备好播放之前会触发这个钩子
        videoDom.addEventListener("canplay", function () {
          renderVideoFrame(videoDom);
          videoDom.play();
          startRender();
        });

        //监听播放结束
        videoDom.addEventListener("ended", function () {
          renderVideoFrame(videoDom);
          videoDom.play();
          startRender();
        });

        // 储存当前是第几秒
        var timerId;
        function startRender() {
          timerId = requestAnimationFrame(updateRender);
        }
        function updateRender() {
          renderVideoFrame(videoDom);
          // 递归调用这个动画
          timerId = requestAnimationFrame(updateRender);
        }
        function stopRender() {
          cancelAnimationFrame(timerId);
        }
      }
      window.onload = function () {
        init();
      };
    </script>
  </head>
  <body></body>
</html>

视频背景用Canvas做

重点在if (!canvas)里面的最后一行，其他的稍微看看注释就明白了

重点在`if (!canvas)`里面的最后一行，其他的稍微看看注释就明白了