canvas实现video背景虚化（原生js可以套入vue项目等）

最新推荐文章于 2023-09-09 16:20:37 发布

逍遥的码农

最新推荐文章于 2023-09-09 16:20:37 发布

阅读量938

点赞数 1

分类专栏： js专栏文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_48171107/article/details/125520594

版权

js专栏专栏收录该内容

32 篇文章 4 订阅

订阅专栏

没啥废话，直接贴代码，哪里不懂的直接问，代码复制好浏览器F12切换为移动端看效果，下图为实现效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrapper {
        position: relative;
      }
      .video-box {
        position: relative;
        margin: 0 auto;
        width: 65%;
        height: 80%;
      }
      #video-background {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        filter: blur(5px);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <canvas id="video-background"></canvas>
      <div class="video-box">
        <video
          loop
          muted
          autoplay
          controls
          width="100%"
          height="100%"
          src="https://cdn.jsdelivr.net/gh/w157020087/CDN/video/%E5%BE%A1%E5%A7%90%E9%A3%8E.mp4"
        ></video>
      </div>
    </div>
  </body>
</html>
<script>
  var v = document.getElementsByTagName("video")[0];
  var canvas = document.getElementById("video-background");
  var context = canvas.getContext("2d");
  var cw = Math.floor(canvas.clientWidth);
  var ch = Math.floor(canvas.clientHeight);
  document.getElementsByTagName("video")[0].play();
  canvas.width = cw;
  canvas.height = ch;
  draw(v, context, cw, ch);
  function draw(v, c, w, h) {
    c.drawImage(v, 0, 0, w, h);
    setTimeout(draw, 20, v, c, w, h);
  }
</script>