fix: iOS playback issues

CapSoftware · Apr 3, 2024 · 2034bf0 · 2034bf0 · vercel · Apr 3, 2024
1 parent b530b1f
commit 2034bf0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 30 deletions.
diff --git a/apps/web/app/api/playlist/route.ts b/apps/web/app/api/playlist/route.ts
@@ -155,7 +155,7 @@ export async function GET(request: NextRequest) {
       return new Response(generatedPlaylist, {
         status: 200,
         headers: {
-          "content-type": "application/x-mpegURL",
+          "content-type": "application/vnd.apple.mpegurl",
           "Access-Control-Allow-Origin": allowedOrigins.includes(origin)
             ? origin
             : "null",
@@ -207,7 +207,7 @@ export async function GET(request: NextRequest) {
     return new Response(generatedPlaylist, {
       status: 200,
       headers: {
-        "content-type": "application/x-mpegURL",
+        "content-type": "application/vnd.apple.mpegurl",
         "Access-Control-Allow-Origin": allowedOrigins.includes(origin)
           ? origin
           : "null",

diff --git a/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx b/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx
@@ -26,40 +26,32 @@ export const VideoPlayer = memo(
       media: HTMLMediaElement,
       hlsInstance: React.MutableRefObject<Hls | null>
     ) => {
-      if (Hls.isSupported() && !isIOS()) {
-        const hls = new Hls({ progressive: true });
-        hls.on(Hls.Events.ERROR, (event, data) => {
-          console.error("HLS error:", data);
-          if (data.fatal) {
-            switch (data.type) {
-              case Hls.ErrorTypes.NETWORK_ERROR:
-                hls.startLoad();
-                break;
-              case Hls.ErrorTypes.MEDIA_ERROR:
-                hls.recoverMediaError();
-                break;
-              default:
-                break;
-            }
+      const hls = new Hls();
+      hls.on(Hls.Events.ERROR, (event, data) => {
+        console.error("HLS error:", data);
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              hls.recoverMediaError();
+              break;
+            default:
+              break;
           }
-        });
+        }
+      });
 
-        hlsInstance.current = hls;
-        hls.loadSource(src);
-        hls.attachMedia(media);
-      } else {
-        media.src = src;
-      }
+      hlsInstance.current = hls;
+      hls.loadSource(src);
+      hls.attachMedia(media);
     };
 
     useEffect(() => {
       if (!videoRef.current) return;
 
-      if (isIOS()) {
-        videoRef.current.src = videoSrc;
-      } else {
-        initializeHls(videoSrc, videoRef.current, videoHlsInstance);
-      }
+      initializeHls(videoSrc, videoRef.current, videoHlsInstance);
 
       return () => {
         videoHlsInstance.current?.destroy();
@@ -75,7 +67,9 @@ export const VideoPlayer = memo(
         playsInline
         controls={false}
         muted
-      />
+      >
+        <source src={videoSrc} type="application/x-mpegURL" />
+      </video>
     );
   })
 );