fix(hls): add source tag

shiyiya · May 4, 2024 · 6e6571c · 6e6571c
1 parent 7f333a2
commit 6e6571c
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "@babel/plugin-transform-template-literals": "^7.24.1",
     "@changesets/cli": "^2.27.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.8",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.2",
@@ -57,9 +57,9 @@
     "terser": "^5.31.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10",
+    "vite": "^5.2.11",
     "vite-plugin-banner": "^0.7.1",
-    "vitest": "^1.5.3"
+    "vitest": "^1.6.0"
   },
   "pnpm": {
     "patchedDependencies": {

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

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -20,11 +20,31 @@ export type Source = {
     | 'mpegts'
     /** other */
     | string
-  type?: 'string' // video/mp4 video/webm
+  type?: VideoMimeType | HLSMimeType | DASHMimeType
 }
 
 export type Lang = 'auto' | 'zh' | 'zh-CN' | 'en'
 
+export type VideoMimeType =
+  | 'video/mp4'
+  | 'video/webm'
+  | 'video/3gp'
+  | 'video/ogg'
+  | 'video/avi'
+  | 'video/mpeg'
+  | 'video/object'
+
+export type HLSMimeType =
+  | 'application/vnd.apple.mpegurl'
+  | 'audio/mpegurl'
+  | 'audio/x-mpegurl'
+  | 'application/x-mpegurl'
+  | 'video/x-mpegurl'
+  | 'video/mpegurl'
+  | 'application/mpegurl'
+
+export type DASHMimeType = 'application/dash+xml'
+
 export interface PlayerOptions {
   source?: Source
   autoplay?: boolean //https://developer.chrome.com/blog/autoplay/

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -28,6 +28,6 @@
   "devDependencies": {
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "sass": "^1.75.0"
+    "sass": "^1.76.0"
   }
 }
diff --git a/packages/docs/public/oplayer.html b/packages/docs/public/oplayer.html
@@ -195,10 +195,10 @@
   <body>
     <div id="oplayer"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected].35/dist/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected].36-beta.0/dist/index.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/index.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected].25/dist/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected].26-beta.0/dist/index.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/index.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/index.min.js"></script>
 

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

diff --git a/packages/hls/src/index.ts b/packages/hls/src/index.ts
@@ -1,6 +1,6 @@
 import { loadSDK, type Player, type PlayerPlugin, type RequiredPartial, type Source } from '@oplayer/core'
 import type Hls from 'hls.js'
-import type { ErrorData, HlsConfig, LevelSwitchedData } from 'hls.js'
+import type { ErrorData, HlsConfig, LevelSwitchedData, MediaAttachedData } from 'hls.js'
 
 const PLUGIN_NAME = 'oplayer-plugin-hls'
 
@@ -141,12 +141,24 @@ class HlsPlugin implements PlayerPlugin {
       active(instance, HlsPlugin.library)
     }
 
-    instance.loadSource(source.src)
-    instance.attachMedia($video)
+    instance.once(HlsPlugin.library.Events.MEDIA_ATTACHED, (_, { media }: MediaAttachedData) => {
+      const $source = document.createElement('source') as HTMLSourceElement
+      $source.src = source.src
+      $source.type = source.type || 'application/x-mpegurl'
+      media.appendChild($source)
+
+      instance.once(HlsPlugin.library.Events.DESTROYING, () => {
+        $source.remove()
+      })
+    })
+
     instance.on(HlsPlugin.library.Events.ERROR, function (_, data) {
       errorHandler(player, data, defaultErrorHandler)
     })
 
+    instance.loadSource(source.src)
+    instance.attachMedia($video)
+
     if (player.context.ui?.setting) {
       generateSetting(player, instance, this.options)
     }