refactor: Update video element in Artplayer to support custom canvas or video

This commit updates the `libmedia.js`, `option.d.ts`, `index.js`, `template.js`, and `scheme/index.js` files in the Artplayer repository. The changes introduce a new `video` property in the `Option` type, allowing for the use of a custom video element in Artplayer. The `video` property can be set to `null`, an `HTMLCanvasElement`, or an `HTMLVideoElement`. This enhancement provides flexibility in rendering video content and improves compatibility with different platforms and use cases.

packages/artplayer-plugin-canvas/src/Extension.js

@@ -0,0 +1,65 @@
+export default class Extension {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.methods = {};
+        this.listeners = {};
+        this.properties = {};
+
+        const handler = {
+            get: (target, prop) => {
+                if (prop in target.properties) {
+                    return target.properties[prop];
+                }
+                if (prop in target.methods) {
+                    return target.methods[prop];
+                }
+                if (prop === 'addEventListener') {
+                    return target.addEventListener.bind(target);
+                }
+                if (prop === 'removeEventListener') {
+                    return target.removeEventListener.bind(target);
+                }
+                if (prop === 'getOriginalCanvas') {
+                    return () => target.canvas;
+                }
+                return target.canvas[prop];
+            },
+            set: (target, prop, value) => {
+                if (prop in target.canvas) {
+                    target.canvas[prop] = value;
+                } else {
+                    target.properties[prop] = value;
+                }
+                return true;
+            },
+        };
+
+        handler[Symbol.hasInstance] = (instance) => {
+            return instance instanceof HTMLCanvasElement || instance === this.proxy;
+        };
+
+        this.proxy = new Proxy(this, handler);
+
+        return this.proxy;
+    }
+
+    addEventListener(type, listener, options) {
+        if (!this.listeners[type]) {
+            this.listeners[type] = [];
+            this.canvas.addEventListener(
+                type,
+                (event) => {
+                    this.listeners[type].forEach((l) => l(event));
+                },
+                options,
+            );
+        }
+        this.listeners[type].push(listener);
+    }
+
+    removeEventListener(type, listener) {
+        if (this.listeners[type]) {
+            this.listeners[type] = this.listeners[type].filter((l) => l !== listener);
+        }
+    }
+}

packages/artplayer/src/index.js

@@ -156,6 +156,7 @@ export default class Artplayer extends Emitter {
             autoPlayback: false,
             autoOrientation: false,
             airplay: false,
+            video: null,
             layers: [],
             contextmenu: [],
             controls: [],

packages/artplayer/src/scheme/index.js

@@ -14,6 +14,13 @@ function validElement(value, type, paths) {
     );
 }
 
+function validVideo(value, _type, paths) {
+    return errorHandle(
+        value === null || value instanceof HTMLCanvasElement || value instanceof HTMLVideoElement,
+        `${paths.join('.')} require 'HTMLVideoElement' or 'HTMLCanvasElement' type`,
+    );
+}
+
 export const ComponentOption = {
     html: validElement,
     disable: `?${b}`,
@@ -68,6 +75,7 @@ export default {
     autoPlayback: b,
     autoOrientation: b,
     airplay: b,
+    video: validVideo,
     plugins: [f],
     layers: [ComponentOption],
     contextmenu: [ComponentOption],

packages/artplayer/src/template.js

@@ -124,11 +124,10 @@ export default class Template {
         this.$infoClose = this.query('.art-info-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
-        if (option.Canvas) {
-            const $canvas = new option.Canvas(this.art);
-            replaceElement($canvas, this.$video);
-            addClass($canvas, 'art-video');
-            this.$video = $canvas;
+        if (option.video) {
+            replaceElement(option.video, this.$video);
+            addClass(option.video, 'art-video');
+            this.$video = option.video;
         }
 
         if (option.backdrop) {

packages/artplayer/types/option.d.ts

@@ -207,6 +207,11 @@ export type Option = {
      */
     airplay?: boolean;
 
+    /**
+     * Custom video element
+     */
+    video?: null | HTMLCanvasElement | HTMLVideoElement;
+
     /**
      * Custom plugin list
      */