背景：
在工作中很多时候会遇到大屏首页需要酷炫的动态背景，很多时候酷炫的动效用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(); };
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。