Refactor artplayer-proxy-canvas to use requestAnimationFrame for frame drawing

packages/artplayer-proxy-canvas/src/index.js

@@ -72,23 +72,9 @@ export default function artplayerProxyCanvas(callback) {
             } catch (error) {
                 console.error('Error drawing video frame:', error);
             }
+            animationFrame = requestAnimationFrame(drawFrame);
         };
 
-        // 使用 requestVideoFrameCallback 进行精确同步
-        let videoFrameCallback;
-        if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-            videoFrameCallback = () => {
-                drawFrame();
-                video.requestVideoFrameCallback(videoFrameCallback);
-            };
-        } else {
-            // 降级方案：使用 requestAnimationFrame
-            videoFrameCallback = () => {
-                drawFrame();
-                animationFrame = requestAnimationFrame(videoFrameCallback);
-            };
-        }
-
         const resize = () => {
             try {
                 const player = art.template?.$player;
@@ -134,28 +120,18 @@ export default function artplayerProxyCanvas(callback) {
         });
 
         art.on('video:play', () => {
-            if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-                video.requestVideoFrameCallback(videoFrameCallback);
-            } else {
-                cancelAnimationFrame(animationFrame);
-                animationFrame = requestAnimationFrame(videoFrameCallback);
-            }
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(drawFrame);
         });
 
         art.on('video:pause', () => {
-            if (!('requestVideoFrameCallback' in HTMLVideoElement.prototype)) {
-                cancelAnimationFrame(animationFrame);
-            }
+            cancelAnimationFrame(animationFrame);
         });
 
         art.on('resize', resize);
 
         const destroy = () => {
-            if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-                video.cancelVideoFrameCallback(videoFrameCallback);
-            } else {
-                cancelAnimationFrame(animationFrame);
-            }
+            cancelAnimationFrame(animationFrame);
             // 清理其他可能的资源...
         };