feat: 重构视频帧绘制逻辑，优化渲染流程，增加视频播放和暂停事件的日志输出

docs/uncompiled/artplayer-proxy-canvas/index.js

@@ -199,17 +199,16 @@ function artplayerProxyCanvas(callback) {
                 });
             }
         });
+        const render = async ()=>{
+            const bitmap = await createImageBitmap(video);
+            ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+            bitmap.close();
+        };
         const drawFrame = async ()=>{
-            if (!video.videoWidth || !video.videoHeight) {
-                console.log("Video dimensions not ready yet");
-                return;
-            }
             try {
-                if (video.readyState >= 2) {
-                    const bitmap = await createImageBitmap(video);
-                    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-                    bitmap.close();
-                } else console.log("Video not ready for frame extraction");
+                console.log("1");
+                await render();
+                console.log("2");
             } catch (error) {
                 console.error("Error drawing video frame:", error);
             }
@@ -245,20 +244,23 @@ function artplayerProxyCanvas(callback) {
         art.on("video:loadedmetadata", async ()=>{
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-            resize();
         });
         art.on("video:play", ()=>{
+            console.log("video:play");
             cancelAnimationFrame(animationFrame);
             animationFrame = requestAnimationFrame(drawFrame);
         });
         art.on("video:pause", ()=>{
+            console.log("video:pause");
             cancelAnimationFrame(animationFrame);
         });
-        art.on("resize", resize);
-        const destroy = ()=>{
+        art.on("resize", ()=>{
+            resize();
+            render();
+        });
+        art.on("destroy", ()=>{
             cancelAnimationFrame(animationFrame);
-        };
-        art.on("destroy", destroy);
+        });
         if (typeof callback === "function") callback.call(art, video, option.url, art);
         else video.src = option.url;
         return canvas;

docs/uncompiled/artplayer-proxy-canvas/index.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas(callback) {\n    return (art) => {\n        const { option, constructor } = art;\n        const { createElement, def, append, sleep } = constructor.utils;\n\n        const canvas = createElement('canvas');\n        const ctx = canvas.getContext('2d');\n        const video = createElement('video');\n        const track = createElement('track');\n        track.default = true;\n        track.kind = 'metadata';\n        append(video, track);\n\n        let animationFrame = null;\n        const { propertys, methods, prototypes, events } = constructor.config;\n        const keys = [...propertys, ...methods, ...prototypes];\n\n        const originalCanvasProperties = {};\n        ['width', 'height'].forEach((prop) => {\n            originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);\n        });\n\n        keys.forEach((key) => {\n            if (key === 'width' || key === 'height') {\n                def(canvas, key, {\n                    get() {\n                        return originalCanvasProperties[key].get.call(this);\n                    },\n                    set(value) {\n                        originalCanvasProperties[key].set.call(this, value);\n                        video[key] = value;\n                    },\n                });\n            } else {\n                def(canvas, key, {\n                    get() {\n                        const value = video[key];\n                 Line truncated
+{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas(callback) {\n    return (art) => {\n        const { option, constructor } = art;\n        const { createElement, def, append, sleep } = constructor.utils;\n\n        const canvas = createElement('canvas');\n        const ctx = canvas.getContext('2d');\n        const video = createElement('video');\n        const track = createElement('track');\n        track.default = true;\n        track.kind = 'metadata';\n        append(video, track);\n\n        let animationFrame = null;\n        const { propertys, methods, prototypes, events } = constructor.config;\n        const keys = [...propertys, ...methods, ...prototypes];\n\n        const originalCanvasProperties = {};\n        ['width', 'height'].forEach((prop) => {\n            originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);\n        });\n\n        keys.forEach((key) => {\n            if (key === 'width' || key === 'height') {\n                def(canvas, key, {\n                    get() {\n                        return originalCanvasProperties[key].get.call(this);\n                    },\n                    set(value) {\n                        originalCanvasProperties[key].set.call(this, value);\n                        video[key] = value;\n                    },\n                });\n            } else {\n                def(canvas, key, {\n                    get() {\n                        const value = video[key];\n                        return typeof value === 'functiLine truncated

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

@@ -53,19 +53,17 @@ export default function artplayerProxyCanvas(callback) {
             }
         });
 
+        const render = async () => {
+            const bitmap = await createImageBitmap(video);
+            ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+            bitmap.close();
+        };
+
         const drawFrame = async () => {
-            if (!video.videoWidth || !video.videoHeight) {
-                console.log('Video dimensions not ready yet');
-                return;
-            }
             try {
-                if (video.readyState >= 2) {
-                    const bitmap = await createImageBitmap(video);
-                    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-                    bitmap.close();
-                } else {
-                    console.log('Video not ready for frame extraction');
-                }
+                console.log('1');
+                await render();
+                console.log('2');
             } catch (error) {
                 console.error('Error drawing video frame:', error);
             }
@@ -108,25 +106,27 @@ export default function artplayerProxyCanvas(callback) {
         art.on('video:loadedmetadata', async () => {
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-            resize();
         });
 
         art.on('video:play', () => {
+            console.log('video:play');
             cancelAnimationFrame(animationFrame);
             animationFrame = requestAnimationFrame(drawFrame);
         });
 
         art.on('video:pause', () => {
+            console.log('video:pause');
             cancelAnimationFrame(animationFrame);
         });
 
-        art.on('resize', resize);
+        art.on('resize', () => {
+            resize();
+            render();
+        });
 
-        const destroy = () => {
+        art.on('destroy', () => {
             cancelAnimationFrame(animationFrame);
-        };
-
-        art.on('destroy', destroy);
+        });
 
         if (typeof callback === 'function') {
             callback.call(art, video, option.url, art);