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/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) {