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

packages/artplayer/src/index.js

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

packages/artplayer/src/scheme/index.js

@@ -14,13 +14,6 @@ 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}`,
@@ -75,7 +68,7 @@ export default {
     autoPlayback: b,
     autoOrientation: b,
     airplay: b,
-    video: validVideo,
+    proxy: f,
     plugins: [f],
     layers: [ComponentOption],
     contextmenu: [ComponentOption],

packages/artplayer/src/template.js

@@ -124,10 +124,15 @@ export default class Template {
         this.$infoClose = this.query('.art-info-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
-        if (option.video) {
-            replaceElement(option.video, this.$video);
-            addClass(option.video, 'art-video');
-            this.$video = option.video;
+        if (option.proxy) {
+            const video = option.proxy.call(this.art, this.art);
+            errorHandle(
+                video instanceof HTMLVideoElement || video instanceof HTMLCanvasElement,
+                `Function 'option.proxy' needs to return 'HTMLVideoElement' or 'HTMLCanvasElement'`,
+            );
+            replaceElement(video, this.$video);
+            video.className = 'art-video';
+            this.$video = video;
         }
 
         if (option.backdrop) {

packages/artplayer/types/option.d.ts

@@ -208,9 +208,9 @@ export type Option = {
     airplay?: boolean;
 
     /**
-     * Custom video element
+     * Custom video proxy
      */
-    video?: null | HTMLCanvasElement | HTMLVideoElement;
+    proxy?: null | ((this: Artplayer, art: Artplayer) => HTMLCanvasElement | HTMLVideoElement);
 
     /**
      * Custom plugin list