feat: 移除不必要的日志输出，优化视频元素的创建逻辑，增加视频播放时的内联属性

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

@@ -1,11 +1,14 @@
 export default function artplayerProxyCanvas(callback) {
     return (art) => {
         const { option, constructor } = art;
-        const { createElement, def, append, sleep } = constructor.utils;
+        const { createElement, def, append } = constructor.utils;
 
         const canvas = createElement('canvas');
         const ctx = canvas.getContext('2d');
+
         const video = createElement('video');
+        video.playsInline = true;
+
         const track = createElement('track');
         track.default = true;
         track.kind = 'metadata';
@@ -62,9 +65,7 @@ export default function artplayerProxyCanvas(callback) {
 
         const animation = async () => {
             try {
-                console.log('1');
                 await draw();
-                console.log('2');
             } catch (error) {
                 console.error('Error drawing video frame:', error);
             }
@@ -72,36 +73,32 @@ export default function artplayerProxyCanvas(callback) {
         };
 
         const resize = () => {
-            try {
-                const player = art.template?.$player;
-                if (!player || option.autoSize) return;
+            const player = art.template?.$player;
+            if (!player || option.autoSize) return;
 
-                const aspectRatio = video.videoWidth / video.videoHeight;
-                const containerWidth = player.clientWidth;
-                const containerHeight = player.clientHeight;
-                const containerRatio = containerWidth / containerHeight;
+            const aspectRatio = video.videoWidth / video.videoHeight;
+            const containerWidth = player.clientWidth;
+            const containerHeight = player.clientHeight;
+            const containerRatio = containerWidth / containerHeight;
 
-                let canvasWidth, canvasHeight;
-                if (containerRatio > aspectRatio) {
-                    canvasHeight = containerHeight;
-                    canvasWidth = canvasHeight * aspectRatio;
-                } else {
-                    canvasWidth = containerWidth;
-                    canvasHeight = canvasWidth / aspectRatio;
-                }
-
-                canvas.width = canvasWidth;
-                canvas.height = canvasHeight;
-
-                const paddingLeft = (containerWidth - canvasWidth) / 2;
-                const paddingTop = (containerHeight - canvasHeight) / 2;
-
-                Object.assign(canvas.style, {
-                    padding: `${paddingTop}px ${paddingLeft}px`,
-                });
-            } catch (error) {
-                console.error('Error in resize function:', error);
+            let canvasWidth, canvasHeight;
+            if (containerRatio > aspectRatio) {
+                canvasHeight = containerHeight;
+                canvasWidth = canvasHeight * aspectRatio;
+            } else {
+                canvasWidth = containerWidth;
+                canvasHeight = canvasWidth / aspectRatio;
             }
+
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+
+            const paddingLeft = (containerWidth - canvasWidth) / 2;
+            const paddingTop = (containerHeight - canvasHeight) / 2;
+
+            Object.assign(canvas.style, {
+                padding: `${paddingTop}px ${paddingLeft}px`,
+            });
         };
 
         art.on('video:loadedmetadata', async () => {
@@ -116,7 +113,6 @@ export default function artplayerProxyCanvas(callback) {
         });
 
         art.on('video:pause', () => {
-            console.log('video:pause');
             cancelAnimationFrame(animationFrame);
         });