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.

docs/uncompiled/artplayer/index.js

@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2024-08-17 20:59:13";
+        return "2024-08-18 18:05:15";
     }
     static get config() {
         return 0, _configDefault.default;
@@ -300,6 +300,7 @@ class Artplayer extends (0, _emitterDefault.default) {
             autoPlayback: false,
             autoOrientation: false,
             airplay: false,
+            video: null,
             layers: [],
             contextmenu: [],
             controls: [],
@@ -1002,6 +1003,9 @@ const f = "function";
 function validElement(value, type, paths) {
     return (0, _utils.errorHandle)(type === s || type === n || value instanceof Element, `${paths.join(".")} require '${s}' or 'Element' type`);
 }
+function validVideo(value, _type, paths) {
+    return (0, _utils.errorHandle)(value === null || value instanceof HTMLCanvasElement || value instanceof HTMLVideoElement, `${paths.join(".")} require 'HTMLVideoElement' or 'HTMLCanvasElement' type`);
+}
 const ComponentOption = {
     html: validElement,
     disable: `?${b}`,
@@ -1055,6 +1059,7 @@ exports.default = {
     autoPlayback: b,
     autoOrientation: b,
     airplay: b,
+    video: validVideo,
     plugins: [
         f
     ],
@@ -1318,11 +1323,10 @@ class Template {
         this.$infoPanel = this.query(".art-info-panel");
         this.$infoClose = this.query(".art-info-close");
         this.$contextmenu = this.query(".art-contextmenus");
-        if (option.Canvas) {
-            const $canvas = new option.Canvas(this.art);
-            (0, _utils.replaceElement)($canvas, this.$video);
-            (0, _utils.addClass)($canvas, "art-video");
-            this.$video = $canvas;
+        if (option.video) {
+            (0, _utils.replaceElement)(option.video, this.$video);
+            (0, _utils.addClass)(option.video, "art-video");
+            this.$video = option.video;
         }
         if (option.backdrop) (0, _utils.addClass)(this.$player, "art-backdrop");
         if (0, _utils.isMobile) (0, _utils.addClass)(this.$player, "art-mobile");