Improve video playback by integrating HLS.js for adaptive streaming

Replace the iframe embed with a video player utilizing HLS.js for adaptive streaming and update the hls.js dependency to version 1.6.11.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/52uJ2fJ

client/src/pages/VideoPage.tsx

@@ -34,6 +34,7 @@ const formatDate = (date: Date | string): string => {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Share2, X, Edit3, Search } from "lucide-react";
+import Hls from "hls.js";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -254,16 +255,30 @@ export default function VideoPage() {
         <div className="flex flex-col lg:flex-row gap-6 relative z-10">
           {/* Main video section */}
           <div className="flex-1">
-            {/* Video player using original Bunny.net iframe */}
+            {/* Video player with HLS.js */}
             <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
-              <iframe
-                src={`https://iframe.mediadelivery.net/embed/384105/${currentVideo.id}?autoplay=false&preroll=false`}
-                className="absolute inset-0 w-full h-full"
-                frameBorder="0"
-                allowFullScreen
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                onLoad={handleVideoPlay}
-                title={currentVideo.title}
+              <video
+                ref={(video) => {
+                  if (video && currentVideo) {
+                    const videoSrc = `https://vz-b9208a4c-8c8.b-cdn.net/${currentVideo.id}/playlist.m3u8`;
+                    
+                    if (Hls.isSupported()) {
+                      const hls = new Hls();
+                      hls.loadSource(videoSrc);
+                      hls.attachMedia(video);
+                      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        console.log('HLS video ready');
+                      });
+                    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                      video.src = videoSrc;
+                    }
+                  }
+                }}
+                controls
+                className="absolute inset-0 w-full h-full object-contain"
+                onPlay={handleVideoPlay}
+                preload="metadata"
+                data-testid="video-player"
               />
             </div>
 

package-lock.json

@@ -67,7 +67,7 @@
         "express-session": "^1.18.2",
         "framer-motion": "^11.13.1",
         "google-auth-library": "^10.2.1",
-        "hls.js": "^1.6.7",
+        "hls.js": "^1.6.11",
         "input-otp": "^1.4.2",
         "lucide-react": "^0.453.0",
         "memoizee": "^0.4.17",
@@ -7441,9 +7441,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.7.tgz",
-      "integrity": "sha512-QW2fnwDGKGc9DwQUGLbmMOz8G48UZK7PVNJPcOUql1b8jubKx4/eMHNP5mGqr6tYlJNDG1g10Lx2U/qPzL6zwQ==",
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.11.tgz",
+      "integrity": "sha512-tdDwOAgPGXohSiNE4oxGr3CI9Hx9lsGLFe6TULUvRk2TfHS+w1tSAJntrvxsHaxvjtr6BXsDZM7NOqJFhU4mmg==",
       "license": "Apache-2.0"
     },
     "node_modules/html-entities": {

package.json

@@ -69,7 +69,7 @@
     "express-session": "^1.18.2",
     "framer-motion": "^11.13.1",
     "google-auth-library": "^10.2.1",
-    "hls.js": "^1.6.7",
+    "hls.js": "^1.6.11",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.453.0",
     "memoizee": "^0.4.17",