将视频封装成canwas播放，防止国产浏览器对视频骚操作

 // 封装的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)