// 封装的Canvas视频播放器函数
function createCanvasVideoPlayer(container, videoUrl) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.createElement('video');
video.src = videoUrl;
video.crossOrigin = 'anonymous';
video.loop = true;
video.muted = true;
video.playsInline = true;
function resizeCanvas() {
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
container.appendChild(canvas);
function drawVideoFrame() {
if (video.paused || video.ended) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const videoAspectRatio = video.videoWidth / video.videoHeight;
const canvasAspectRatio = canvas.width / canvas.height;
let renderWidth, renderHeight, offsetX, offsetY;
if (videoAspectRatio > canvasAspectRatio) {
renderHeight = canvas.height;
renderWidth = video.videoWidth * (renderHeight / video.videoHeight);
offsetX = (canvas.width - renderWidth) / 2;
offsetY = 0;
} else {
renderWidth = canvas.width;
renderHeight = video.videoHeight * (renderWidth / video.videoWidth);
offsetX = 0;
offsetY = (canvas.height - renderHeight) / 2;
}
ctx.drawImage(video, offsetX, offsetY, renderWidth, renderHeight);
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(drawVideoFrame);
}
video.addEventListener('loadedmetadata', () => {
video.play().then(() => {
drawVideoFrame();
}).catch(e => {
console.error('自动播放失败:', e);
// 如果自动播放失败，用户交互后重新尝试
document.addEventListener('click', () => {
video.play();
}, { once: true });
});
});
video.addEventListener('ended', () => {
video.currentTime = 0;
video.play();
});
return {
play: function() {
video.play();
drawVideoFrame();
},
pause: function() {
video.pause();
}
};
}
// 使用示例
const videoUrl = 'bg5.mp4';
const player = createCanvasVideoPlayer(document.getElementById('videoBackground'), videoUrl);
console.log(player)