feat: 增加字幕相关属性和事件，优化字幕切换逻辑

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

@@ -15,7 +15,6 @@ export default function artplayerProxyCanvas(callback) {
         const { propertys, methods, prototypes, events } = constructor.config;
         const keys = [...propertys, ...methods, ...prototypes];
 
-        // 存储 canvas 的原始属性
         const originalCanvasProperties = {};
         ['width', 'height'].forEach((prop) => {
             originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
@@ -61,8 +60,6 @@ export default function artplayerProxyCanvas(callback) {
             }
             try {
                 if (video.readyState >= 2) {
-                    // HAVE_CURRENT_DATA or higher
-                    // 使用 createImageBitmap 进行预处理
                     const bitmap = await createImageBitmap(video);
                     ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
                     bitmap.close();
@@ -94,11 +91,9 @@ export default function artplayerProxyCanvas(callback) {
                     canvasHeight = canvasWidth / aspectRatio;
                 }
 
-                // 设置 canvas 大小为实际显示大小
                 canvas.width = canvasWidth;
                 canvas.height = canvasHeight;
 
-                // 居中 canvas
                 const paddingLeft = (containerWidth - canvasWidth) / 2;
                 const paddingTop = (containerHeight - canvasHeight) / 2;
 
@@ -110,13 +105,10 @@ export default function artplayerProxyCanvas(callback) {
             }
         };
 
-        // 在视频元数据加载完成后设置 canvas 尺寸并绘制第一帧
         art.on('video:loadedmetadata', async () => {
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-            await sleep(300);
             resize();
-            drawFrame();
         });
 
         art.on('video:play', () => {
@@ -132,7 +124,6 @@ export default function artplayerProxyCanvas(callback) {
 
         const destroy = () => {
             cancelAnimationFrame(animationFrame);
-            // 清理其他可能的资源...
         };
 
         art.on('destroy', destroy);

packages/artplayer/src/player/subtitleOffsetMix.js

@@ -6,7 +6,7 @@ export default function subtitleOffsetMix(art) {
 
     let offsetCache = 0;
     let cuesCache = [];
-    art.on('subtitle:switch', () => {
+    art.on('subtitleSwitch', () => {
         cuesCache = [];
     });
 

packages/artplayer/src/subtitle.js

@@ -50,6 +50,11 @@ export default class Subtitle extends Component {
         return this.textTrack.activeCues[0];
     }
 
+    get cues() {
+        if (!this.textTrack) return [];
+        return Array.from(this.textTrack.cues);
+    }
+
     style(key, value) {
         const { $subtitle } = this.art.template;
         if (typeof key === 'object') {
@@ -62,6 +67,7 @@ export default class Subtitle extends Component {
         const { $subtitle } = this.art.template;
         $subtitle.innerHTML = '';
         if (this.activeCue) {
+            this.art.emit('subtitleBeforeUpdate', this.activeCue);
             if (this.art.option.subtitle.escape) {
                 $subtitle.innerHTML = this.activeCue.text
                     .split(/\r?\n/)
@@ -70,7 +76,7 @@ export default class Subtitle extends Component {
             } else {
                 $subtitle.innerHTML = this.activeCue.text;
             }
-            this.art.emit('subtitleUpdate', this.activeCue.text);
+            this.art.emit('subtitleAfterUpdate', this.activeCue);
         }
     }
 
@@ -94,6 +100,9 @@ export default class Subtitle extends Component {
         $newTrack.src = url;
         $newTrack.label = option.subtitle.name || 'Artplayer';
         $newTrack.track.mode = 'hidden';
+        $newTrack.onload = (event) => {
+            this.art.emit('subtitleTrackLoad', $newTrack, event);
+        };
 
         this.eventDestroy();
         remove($track);

packages/artplayer/types/artplayer.d.ts

@@ -152,6 +152,9 @@ declare class Artplayer extends Player {
     readonly subtitle: {
         get url(): string;
         set url(url: string);
+        get textTrack(): TextTrack;
+        get activeCue(): VTTCue;
+        get cues(): TextTrackCueList;
         style(name: string | Partial<CSSStyleDeclaration>, value?: string): void;
         switch(url: string, option?: Subtitle): Promise<string>;
     } & Component;

packages/artplayer/types/events.d.ts

@@ -36,9 +36,11 @@ export type Events = {
     setting: [state: boolean];
     hotkey: [event: Event];
     destroy: [];
-    subtitleUpdate: [text: string];
+    subtitleBeforeUpdate: [cue: VTTCue];
+    subtitleAfterUpdate: [cue: VTTCue];
     subtitleLoad: [url: string];
     subtitleSwitch: [url: string];
+    subtitleTrackLoad: [track: HTMLTrackElement, event: Event];
     focus: [event: Event];
     blur: [event: Event];
     dblclick: [event: Event];