fix(core): close #114

shiyiya · Mar 4, 2024 · 8f9dac1 · 8f9dac1
1 parent 2350040
commit 8f9dac1
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 116 deletions.
diff --git a/examples/standalone/helper.ts b/examples/standalone/helper.ts
@@ -0,0 +1,48 @@
+import { Player } from '@oplayer/core'
+import { MenuBar } from '@oplayer/ui/src/types'
+import { FORMAT_MENU } from './constants'
+import { vttThumbnails, ad } from '@oplayer/plugins'
+import hls from '@oplayer/hls'
+
+export const register = (player: Player) => {
+  player.context.ui?.menu.register(<MenuBar>{
+    name: 'FMT',
+    position: 'top',
+    children: FORMAT_MENU,
+    onChange({ value, name }, elm) {
+      // src = value
+      elm.innerText = name
+      player
+        .changeSource({ src: value })
+        // .changeQuality({ src: value })
+        .then((_) => {
+          // GET	https://cc.zorores.com/20/2e/202eaab6dff289a5976399077449654e/eng-2.vtt
+          // player.context.ui.subtitle.changeSource([
+          //   {
+          //     name: 'Default',
+          //     default: true,
+          //     src: 'https://cc.zorores.com/7f/c1/7fc1657015c5ae073e9db2e51ad0f8a0/eng-2.vtt'
+          //   }
+          // ])
+        })
+    }
+  })
+
+  player.applyPlugin(
+    vttThumbnails({
+      src: 'https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt'
+    })
+  )
+
+  player.applyPlugin(
+    ad({
+      autoplay: false,
+      image: 'http://5b0988e595225.cdn.sohucs.com/images/20190420/da316f8038b242c4b34f6db18b0418d4.gif',
+      // video: VIDEO_LIST[1],
+      duration: 10,
+      skipDuration: 5,
+      target: 'https://oplayer.vercel.app',
+      plugins: [hls({ qualityControl: false })]
+    })
+  )
+}
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -1,14 +1,14 @@
 import { html, render } from 'lit'
 import { live } from 'lit/directives/live.js'
-import { ref } from 'lit/directives/ref.js'
 
-import { Player, isMobile, PlayerEvent, Source } from '@oplayer/core'
+import { Player, isMobile, PlayerEvent } from '@oplayer/core'
 import danmaku from '@oplayer/danmaku'
 import dash from '@oplayer/dash'
 import hls from '@oplayer/hls'
 import mpegts from '@oplayer/mpegts'
 import ui from '@oplayer/ui'
 import torrent from '@oplayer/torrent'
+import { PlaylistPlugin } from '@oplayer/plugins'
 
 import DANMAKU from '../../packages/docs/public/danmaku.xml'
 import POSTER from '../../packages/docs/public/poster.png'
@@ -20,21 +20,19 @@ import FLV from '../../packages/docs/public/op.flv'
 import MP4 from '../../packages/docs/public/君の名は.mp4'
 import vercel from '../../packages/docs/public/vercel.svg'
 
-import { MenuBar } from '@oplayer/ui/src/types'
-import { FORMAT_MENU, highlight, VIDEO_LIST } from './constants'
 import emptyBuffer from './emptyBuffer'
-import { vttThumbnails, ad, PlaylistPlugin } from '@oplayer/plugins'
+import { highlight } from './constants'
 
 interface Ctx {
   ui: ReturnType<typeof ui>
   hls: ReturnType<typeof hls>
   dash: ReturnType<typeof dash>
   mpegts: ReturnType<typeof mpegts>
   danmaku: ReturnType<typeof danmaku>
+  playlist: PlaylistPlugin
 }
 
-let src = VIDEO_LIST[0]!
-let currentDataSrcId = 0
+const initialIndex = 0
 
 const player = Player.make<Ctx>('#player', {
   // muted: true,
@@ -81,18 +79,14 @@ const player = Player.make<Ctx>('#player', {
       settings: ['loop'],
       pictureInPicture: true,
       // showControls: 'played',
-      // theme: { primaryColor: '#00b2ff' },
       highlight: { color: 'pink' },
-      subtitle: {
-        background: true
-      },
+      subtitle: { background: true },
       icons: {
         progressIndicator: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
         <path d="M16.118 3.667h.382a3.667 3.667 0 013.667 3.667v7.333a3.667 3.667 0 01-3.667 3.667h-11a3.667 3.667 0 01-3.667-3.667V7.333A3.667 3.667 0 015.5 3.666h.382L4.95 2.053a1.1 1.1 0 011.906-1.1l1.567 2.714h5.156L15.146.953a1.101 1.101 0 011.906 1.1l-.934 1.614z"/>
         <path d="M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z" fill="#fff"/>
         <path d="M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z"/>
-    </svg>`,
-        loadingIndicator: `<img style='max-height: 40%' src='https://user-images.githubusercontent.com/40481418/135559343-98e82c95-1a67-4083-8ecb-763f6e62577e.gif'/>`
+    </svg>`
       }
     }),
     torrent(),
@@ -105,7 +99,7 @@ const player = Player.make<Ctx>('#player', {
       source: DANMAKU //SUPER_DANMAKU
     }),
     new PlaylistPlugin({
-      initialIndex: 0,
+      initialIndex,
       // m3uList: {
       //   sourceFormat(info) {
       //     const chunk = info.title.substring(3).split(' ')
@@ -120,6 +114,19 @@ const player = Player.make<Ctx>('#player', {
       //   }
       // },
       sources: [
+        {
+          title: 'HLS with default SRT subtitle',
+          src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+          subtitles: [
+            {
+              name: 'Default',
+              default: true,
+              src: SRT,
+              offset: 2
+            }
+          ],
+          duration: '10:34'
+        },
         {
           title: '君の名は - MP4',
           poster: POSTER,
@@ -164,125 +171,46 @@ const player = Player.make<Ctx>('#player', {
   ])
   .create()
 
-//@ts-ignore
-if (false) {
-  player.applyPlugin(
-    vttThumbnails({
-      src: 'https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt'
-    })
-  )
-
-  player.applyPlugin(
-    ad({
-      autoplay: false,
-      image: 'http://5b0988e595225.cdn.sohucs.com/images/20190420/da316f8038b242c4b34f6db18b0418d4.gif',
-      // video: VIDEO_LIST[1],
-      duration: 10,
-      skipDuration: 5,
-      target: 'https://oplayer.vercel.app',
-      plugins: [hls({ qualityControl: false })]
-    })
-  )
-}
-
-player.context.ui?.menu.register(<MenuBar>{
-  name: 'FMT',
-  position: 'top',
-  children: FORMAT_MENU,
-  onChange({ value, name }, elm) {
-    src = value
-    elm.innerText = name
-    player
-      .changeSource({ src: value })
-      // .changeQuality({ src: value })
-      .then((_) => {
-        // GET	https://cc.zorores.com/20/2e/202eaab6dff289a5976399077449654e/eng-2.vtt
-        // player.context.ui.subtitle.changeSource([
-        //   {
-        //     name: 'Default',
-        //     default: true,
-        //     src: 'https://cc.zorores.com/7f/c1/7fc1657015c5ae073e9db2e51ad0f8a0/eng-2.vtt'
-        //   }
-        // ])
-      })
-  }
-})
-
 function stopLoad() {
   player.loader?.destroy()
   const u8 = Uint8Array.from(emptyBuffer)
   player.$video.src = URL.createObjectURL(new Blob([u8.buffer]))
 }
 
-const meta = () => html`
-  <div>
-    <h4>Oh-Player v${Player.version}</h4>
-    <p>
-      STAR ON <a target="_blank" href="https://github.com/shiyiya/oplayer">GitHub</a> |
-      <a href="./script.html" target="_blank">SCRIPT DEMO</a>
-    </p>
-  </div>
-`
-let logs: HTMLTextAreaElement
+let src: string = player.context.playlist.options.sources[initialIndex].src
 
 const actions = () => html`<p style="display:flex;">
-    <input type="text" @input=${(e: any) => (src = e.target.value)} style="width:100%;" .value=${live(src)} />
-
-    <button @click=${() => player.changeSource({ src })}>Load</button>
-
-    <button
-      @click=${() => {
-        src =
-          VIDEO_LIST[
-            currentDataSrcId + 1 >= VIDEO_LIST.length ? (currentDataSrcId = 0) : (currentDataSrcId += 1)
-          ]!
-
-        player.changeSource(
-          new Promise<Source>((r) => {
-            stopLoad()
-            r({ src })
-          })
-        )
-      }}
-    >
-      Queue
-    </button>
+  <input type="text" @input=${(e: any) => (src = e.target.value)} style="width:100%;" .value=${live(src)} />
 
-    <button @click=${stopLoad}>StopLoad</button>
-  </p>
+  <button @click=${() => player.changeSource({ src })}>Load</button>
 
-  <textarea readonly ${ref((f) => (logs = f as any))}></textarea> `
+  <button @click=${stopLoad}>StopLoad</button>
+</p> `
 
 render(actions(), document.getElementById('actions')!)
 
 player.on((e: PlayerEvent) => {
-  if (e.type == 'mousemove') return
-
   render(actions(), document.getElementById('actions')!)
 
-  let eventName = `==> ${e.type}`
-  if ('durationchange' == e.type) {
-    eventName += `: ${player.duration}`
-  }
-
-  logs.value = eventName + '\r\n' + logs.value
-  // logs.style.height = `${logs.scrollHeight}px`
-
-  if (e.type == 'videosourcechange') {
-    logs.value = eventName + '\r\n'
+  if ('timeupdate' == e.type) {
+    return
   }
 
-  if (logs.value.split('==>').length >= 66) {
-    logs.value =
-      '==> ------------clear logs------------- \r\n' + logs.value.split('==>').slice(0, 20).join('==>')
-  }
-
-  // if (e.type != 'progress') console.info(e)
+  console.log(e)
 })
 
-// p.$root.addEventListener('click', p.unmute.bind(p), { once: true })
-
-render(meta(), document.getElementById('meta')!)
+render(
+  html`
+    <div>
+      <h4>Oh-Player v${Player.version}</h4>
+      <p>
+        STAR ON <a target="_blank" href="https://github.com/shiyiya/oplayer">GitHub</a> |
+        <a href="./script.html" target="_blank">SCRIPT DEMO</a>
+      </p>
+    </div>
+  `,
+  document.getElementById('meta')!
+)
 
 //@ts-ignore
 window.player = player
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.2.32]
+
+- Fix the video src is empty when hls video with external subtitle and can't be played. Close #114.
+
 ## [1.2.28]
 
 - fix initial playback rate not working

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/core",
-  "version": "1.2.31",
+  "version": "1.2.32",
   "description": "Oh! Another HTML5 video player.",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/core/src/player.ts b/packages/core/src/player.ts
@@ -255,7 +255,7 @@ export class Player<Context extends Record<string, any> = Record<string, any>> {
   }
 
   play() {
-    if (!this.$video.src || this.isSourceChanging) return
+    if ((!this.$video.src && !this.$video.currentSrc) || this.isSourceChanging) return
     if (this.options.autopause) {
       for (let i = 0; i < Player.players.length; i++) {
         const player = Player.players[i]

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.2.35]
+
+- release.
+
 ## [1.2.35.beta-2]
 
 - fix keyboard (fn).

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.2.35.beta-1",
+  "version": "1.2.35",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",