Introduce hls.js for m3u8 support (#245)

package.json

@@ -39,6 +39,7 @@
     "cookies-next": "^2.1.1",
     "dplayer": "^1.27.1",
     "framer-motion": "^10.2.5",
+    "hls.js": "^1.5.3",
     "husky": "^8.0.3",
     "jotai": "^2.0.3",
     "md5": "^2.3.0",

src/components/video-player/index.tsx

@@ -14,6 +14,8 @@ import md5 from 'md5';
 
 import type { BangumiData } from '~/types/bangumi';
 
+import Hls from 'hls.js';
+
 interface Props {
   bangumiData: BangumiData;
   danmakuApi: string;
@@ -42,6 +44,30 @@ export default function VideoPlayer({ bangumiData, danmakuApi, episode }: Props)
         container: containerRef.current,
         video: {
           url: playUrl,
+          type: 'customHls',
+          customType: {
+            customHls(video: HTMLVideoElement) {
+              if (Hls.isSupported()) {
+                // Assume it's an m3u8 file
+                const hls = new Hls();
+                hls.loadSource(playUrl);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                  video.play();
+                });
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                  if (data.fatal) {
+                    // console.error('HLS fatal error:', data.type, data.details);
+                    // HLS playback failed, try using HTML5 video player
+                    video.src = playUrl;
+                  }
+                });
+              } else {
+                // HLS is not supported, failback to HTML5 video
+                video.src = playUrl;
+              }
+            },
+          },
         },
         screenshot: true,
         autoplay: autoPlay,

src/pages/player/[bangumi].tsx

@@ -31,6 +31,7 @@ export default function Player() {
     <Box>
       <Helmet>
         <title>{`BGmi - ${bangumiData.bangumi_name}`}</title>
+        <meta name="referrer" content="no-referrer" />
       </Helmet>
       <Heading
         ml={{ lg: '10', base: '5' }}