feat: add danmuku plugin documentation and i18n setup guide

- Created a new documentation file for the danmuku plugin, including code snippets for usage.
- Added a new i18n setup guide, detailing language settings, default languages, language imports, and how to add or modify languages.
- Included example code for initializing the Artplayer with different languages and importing language files.

docs/compiled/artplayer-proxy-canvas.mjs

@@ -4,4 +4,121 @@
  * (c) 2017-2026 Harvey Zhao
  * Released under the MIT License.
  */
-function e(e){return t=>{const{constructor:n}=t,{createElement:i}=n.utils,o=i("canvas"),a=i("video"),r=o.getContext("2d");let c=null;const d={};for(const e in o)"function"===typeof o[e]&&(d[e]=o[e].bind(o));for(const e in a)e in o||Object.defineProperty(o,e,{get(){const t=a[e];return"function"===typeof t?t.bind(a):t},set(t){a[e]=t},configurable:!0,enumerable:!0});for(const e in d)o[e]=function(...t){return e in d?d[e](...t):a[e](...t)};return function(){const{events:e}=n.config;setTimeout(()=>{e.forEach(e=>{t.proxy(a,e,e=>{t.emit(`video:${e.type}`,e)})})})}(),t.on("video:loadedmetadata",()=>{o.width=a.videoWidth,o.height=a.videoHeight}),t.on("video:play",()=>{cancelAnimationFrame(c),u()}),t.on("video:pause",()=>{cancelAnimationFrame(c)}),t.on("resize",()=>{!function(){const e=t.template?.$player;if(!e||t.option.autoSize)return;const n=a.videoWidth/a.videoHeight,i=e.clientWidth,r=e.clientHeight;let c,d;i/r>n?(d=r,c=d*n):(c=i,d=c/n),o.width=c,o.height=d;const s=(i-c)/2,u=(r-d)/2;Object.assign(o.style,{padding:`${u}px ${s}px`})}(),s()}),t.on("destroy",()=>{cancelAnimationFrame(c)}),o;async function s(){try{if("undefined"!==typeof createImageBitmap){const e=await createImageBitmap(a);r.drawImage(e,0,0,o.width,o.height),e.close()}else r.drawImage(a,0,0,o.width,o.height);e&&e(r,a),t.emit("artplayerProxyCanvas:draw",r,a)}catch(n){t.emit("artplayerProxyCanvas:error",n)}}async function u(){await s(),c=requestAnimationFrame(u)}}}export{e as default};
+function artplayerProxyCanvas(callback) {
+  return (art) => {
+    const { constructor } = art;
+    const { createElement } = constructor.utils;
+    const canvas = createElement("canvas");
+    const video = createElement("video");
+    const ctx = canvas.getContext("2d");
+    let animationId = null;
+    const originalCanvasMethods = {};
+    for (const prop in canvas) {
+      if (typeof canvas[prop] === "function") {
+        originalCanvasMethods[prop] = canvas[prop].bind(canvas);
+      }
+    }
+    for (const prop in video) {
+      if (!(prop in canvas)) {
+        Object.defineProperty(canvas, prop, {
+          get() {
+            const value = video[prop];
+            return typeof value === "function" ? value.bind(video) : value;
+          },
+          set(value) {
+            video[prop] = value;
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
+    }
+    for (const prop in originalCanvasMethods) {
+      canvas[prop] = function(...args) {
+        if (prop in originalCanvasMethods) {
+          return originalCanvasMethods[prop](...args);
+        }
+        return video[prop](...args);
+      };
+    }
+    setupEventListeners();
+    setupArtPlayerEvents();
+    return canvas;
+    function setupEventListeners() {
+      const { events } = constructor.config;
+      setTimeout(() => {
+        events.forEach((event) => {
+          art.proxy(video, event, (event2) => {
+            art.emit(`video:${event2.type}`, event2);
+          });
+        });
+      });
+    }
+    async function draw() {
+      try {
+        if (typeof createImageBitmap !== "undefined") {
+          const bitmap = await createImageBitmap(video);
+          ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+          bitmap.close();
+        } else {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        }
+        callback && callback(ctx, video);
+        art.emit("artplayerProxyCanvas:draw", ctx, video);
+      } catch (error) {
+        art.emit("artplayerProxyCanvas:error", error);
+      }
+    }
+    async function animation() {
+      await draw();
+      animationId = requestAnimationFrame(animation);
+    }
+    function resize() {
+      const player = art.template?.$player;
+      if (!player || art.option.autoSize)
+        return;
+      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`
+      });
+    }
+    function setupArtPlayerEvents() {
+      art.on("video:loadedmetadata", () => {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+      });
+      art.on("video:play", () => {
+        cancelAnimationFrame(animationId);
+        animation();
+      });
+      art.on("video:pause", () => {
+        cancelAnimationFrame(animationId);
+      });
+      art.on("resize", () => {
+        resize();
+        draw();
+      });
+      art.on("destroy", () => {
+        cancelAnimationFrame(animationId);
+      });
+    }
+  };
+}
+export {
+  artplayerProxyCanvas as default
+};