背景：
在工作中很多时候会遇到大屏首页需要酷炫的动态背景，很多时候酷炫的动效用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.drawImage(videoEl, 0, 0, cvsWidth, cvsHeight);
ctx.clearRect(0, 0, cvsWidth, cvsHeight);
};
videoRender();
};
标签：canvas,const,videoEl,video,自动播放,播放 From： https://www.cnblogs.com/zion0707/p/17601832.html