fix(canvas): [PKG-CANVAS-SUBTITLE-01] attach native subtitle tracks

packages/artplayer-proxy-canvas/src/index.ts

@@ -5,6 +5,7 @@ import { hasDimensions, resizeCanvas } from './geometry'
 import { ownMedia } from './media'
 import { createRenderer } from './renderer'
 import { createFrameScheduler } from './scheduler'
+import { forwardSubtitleTrack } from './subtitles'
 
 function artplayerProxyCanvas(callback?: DrawCallback) {
   return (art: Artplayer): HTMLCanvasElement => {
@@ -67,6 +68,7 @@ function artplayerProxyCanvas(callback?: DrawCallback) {
     }
 
     try {
+      forwardSubtitleTrack(canvas, video, constructor.utils.createElement('track'), active)
       listen('destroy', destroy)
       listen('video:loadedmetadata', () => {
         if (hasDimensions(video)) {

packages/artplayer-proxy-canvas/src/subtitles.ts

@@ -0,0 +1,15 @@
+export function forwardSubtitleTrack(canvas: HTMLCanvasElement, video: HTMLVideoElement, initialTrack: HTMLTrackElement, active: () => boolean): void {
+  if (!active())
+    return
+  const append = canvas.appendChild
+  initialTrack.kind = 'metadata'
+  initialTrack.default = true
+  video.appendChild(initialTrack)
+  canvas.appendChild = <T extends Node>(node: T): T => {
+    if (active() && node.nodeType === 1 && node.nodeName === 'TRACK' && 'namespaceURI' in node && node.namespaceURI === 'http://www.w3.org/1999/xhtml') {
+      initialTrack.remove()
+      return video.appendChild(node)
+    }
+    return append.call(canvas, node) as T
+  }
+}