fix: support HLS playback in web browsers

package.json

@@ -3,7 +3,18 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "scripts": {"dev":"vite","build":"vite build","preview":"vite preview"},
-  "dependencies": {"@vitejs/plugin-react":"latest","vite":"latest","react":"latest","react-dom":"latest","react-router-dom":"latest","lucide-react":"latest"},
-  "devDependencies": {}
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "latest",
+    "hls.js": "^1.7.4",
+    "lucide-react": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-router-dom": "latest",
+    "vite": "latest"
+  }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: latest
         version: 6.3.0(vite@8.3.7)
+      hls.js:
+        specifier: ^1.7.4
+        version: 1.7.4
       lucide-react:
         specifier: latest
         version: 1.71.0(react@19.3.1)
@@ -163,6 +166,9 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  hls.js@1.7.4:
+    resolution: {integrity: sha512-3GlxGdPvT2YHvQYOt+yOzT/DEior/qJVNIylHA77kgeoBTdQQqi70GwefNEUmHQeNGyjC8U62+bruqW/Tpm+tg==}
+
   lightningcss-android-arm64@1.33.0:
     resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
     engines: {node: '>= 12.0.0'}
@@ -413,6 +419,8 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  hls.js@1.7.4: {}
+
   lightningcss-android-arm64@1.33.0:
     optional: true
 

src/components/player/VideoPlayer.jsx

@@ -1,8 +1,9 @@
 // Author: fruit.com.cn
 import { useEffect, useRef } from 'react';
+import Hls from 'hls.js';
 
 export function VideoPlayer({ src, poster, autoPlay = true, muted = true, onProgress }) {
   const ref = useRef(null);
-  useEffect(() => { const video = ref.current; if (!video || !src) return undefined; const attempt = video.play(); attempt?.catch(() => {}); return () => video.pause(); }, [src]);
-  return <video ref={ref} className="video-player" src={src} poster={poster} controls playsInline autoPlay={autoPlay} muted={muted} onTimeUpdate={(event) => onProgress?.(event.currentTarget.currentTime)} />;
+  useEffect(() => { const video = ref.current; if (!video || !src) return undefined; const hls = new Hls(); if (video.canPlayType('application/vnd.apple.mpegurl')) video.src = src; else if (Hls.isSupported()) { hls.loadSource(src); hls.attachMedia(video); } const attempt = video.play(); attempt?.catch(() => {}); return () => { hls.destroy(); video.pause(); }; }, [src]);
+  return <video ref={ref} className="video-player" poster={poster} controls playsInline autoPlay={autoPlay} muted={muted} onTimeUpdate={(event) => onProgress?.(event.currentTarget.currentTime)} />;
 }