try fix ios subtitle

shiyiya · Mar 21, 2024 · 0857c8e · 0857c8e
1 parent 1bb1d8a
commit 0857c8e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "start": "pnpm run watch",
     "dev": "pnpm --filter=!@oplayer/docs --parallel run start",
     "dev:exam": "cd examples/standalone && pnpm run start",
+    "build": "pnpm --filter=!@oplayer/docs run build",
     "build:packs": "pnpm --filter=@oplayer/* run build",
     "build:core": "pnpm --filter=@oplayer/core run build",
     "build:plugins": "pnpm --filter=@oplayer/plugins run build",

diff --git a/packages/ui/src/components/Subtitle.ts b/packages/ui/src/components/Subtitle.ts
@@ -128,23 +128,22 @@ export class Subtitle {
     this.$track = <HTMLTrackElement>$.render(
       $.create('track', {
         default: true,
-        kind: 'metadata'
+        kind: 'metadata',
+        id: 'primary'
       }),
       $video
     )
 
     // video fullscreen
     if (!this.player._requestFullscreen) {
-      const { track } = (this.$iosTrack = $.render<HTMLTrackElement>(
-        $.create('track', {
-          default: false,
-          kind: 'captions',
-          id: '__Orz__'
-        }),
-        $video
-      ))
+      const { track } = (this.$iosTrack = $.create('track', {
+        default: false,
+        kind: 'captions',
+        id: '__Orz__'
+      }))
 
       track.mode = 'hidden'
+      $.render(this.$iosTrack, $video)
 
       this.player.on('fullscreenchange', ({ payload }) => {
         if (payload.isWeb) return
@@ -158,24 +157,19 @@ export class Subtitle {
   }
 
   changeOffset() {
-    const offset = this.currentSubtitle!.offset
+    const offset = this.currentSubtitle?.offset
 
     if (offset) {
-      const cues = this.player.$video.textTracks[0]?.cues
-      const duration = this.player.duration
+      ;([this.$track, this.$iosTrack] as const).forEach(($track) => {
+        if (!$track) return
+        const cues = $track.track.cues
+        const duration = this.player.duration
 
-      Array.from(cues || []).forEach((cue) => {
-        cue.startTime = clamp(cue.startTime + offset, 0, duration)
-        cue.endTime = clamp(cue.endTime + offset, 0, duration)
-      })
-
-      //ios
-      if (this.$iosTrack) {
-        Array.from(this.player.$video.textTracks[1]?.cues || []).forEach((cue) => {
+        Array.from(cues || []).forEach((cue) => {
           cue.startTime = clamp(cue.startTime + offset, 0, duration)
           cue.endTime = clamp(cue.endTime + offset, 0, duration)
         })
-      }
+      })
     }
   }
 
@@ -185,11 +179,9 @@ export class Subtitle {
   }
 
   update = () => {
-    const { $dom, player } = this
-    const activeCues = player.$video.textTracks[0]?.activeCues
-
+    let html = ''
+    const activeCues = this.$track.track.activeCues
     if (activeCues?.length) {
-      let html = ''
       for (let i = 0; i < activeCues.length; i++) {
         const activeCue = activeCues[i] as VTTCue | undefined
         if (activeCue) {
@@ -204,10 +196,8 @@ export class Subtitle {
             .join('')
         }
       }
-      $dom.innerHTML = html
-    } else {
-      $dom.innerHTML = ''
     }
+    this.$dom.innerHTML = html
   }
 
   show() {