canvas实现视频播放并支持自动播放-526互联

背景：

在工作中很多时候会遇到大屏首页需要酷炫的动态背景，很多时候酷炫的动效用css和js比较难于实现。此时就会产生两种方案，第一种是采用gif，第二种会采用video方案。

但是第一种方案有时候导出的 gif 图片往往会比较大，在首屏加载有时候会不太理想，资源比较大在加载时会出现一卡一卡的现象，体验不太友好。此时就衍生除了第二种方案视频播放方案，但是如果直接使用video标签去播放会出现浏览器的一些兼容性问题和样式不统一问题，还有就是层级有时候会在最顶端遮盖了其他元素，导致不好的效果，这时就要采用canvas去播放视频来解决这些问题了。

选择方案：

video + canvas

简单示例：

代码实现：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>canvas实现视频播放并支持自动播放</title>
</head>
<body>
  <canvas id="canvas" width="640px" height="360px"></canvas>

  <script src="./index.js"></script>  
</body>
</html>

index.js

window.onload = () => {
  
  // 创建一个虚拟video元素
  const videoEl = document.createElement("video");
  videoEl.src = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";

  // 重要：由于浏览器限制自动播放问题，则需要使用无声播放即可实现自动播放
  videoEl.muted = "muted"; 
  videoEl.autoplay = "autoplay";
  videoEl.loop = "loop";
  videoEl.play();


  // 创建canvas
  const canvas = document.getElementById("canvas");
  const cvsWidth = canvas.width;
  const cvsHeight = canvas.height;
  const ctx = canvas.getContext("2d");

  // 使用requestAnimationFrame定时器实现canvas绘制video每一帧
  const videoRender = () => {
    window.requestAnimationFrame(videoRender);
    ctx.clearRect(0, 0, cvsWidth, cvsHeight);
    ctx.drawImage(videoEl, 0, 0, cvsWidth, cvsHeight);
  };
  videoRender();
  
};