sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate Bunny.net iframe player for video playback

Browse Source 
Replace HLS.js video player with Bunny.net iframe embed in VideoPage.tsx to utilize their CDN for video streaming.

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
This commit is contained in:
sebastjanartic 2025-08-28 17:43:05 +00:00
parent eb29cb0b7e
commit b744eb1bf5
1 changed files with 10 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/pages/VideoPage.tsx
View File

@ -255,30 +255,17 @@ export default function VideoPage() {
<div className="flex flex-col lg:flex-row gap-6 relative z-10"> <div className="flex flex-col lg:flex-row gap-6 relative z-10">
{/* Main video section */} {/* Main video section */}
<div className="flex-1"> <div className="flex-1">
{/* Video player with HLS.js */} {/* Bunny.net iframe player */}
<div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"> <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
<video <iframe
ref={(video) => { src={`https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID || "384105"}/${currentVideo.id}?preroll=false&postroll=false&ads=false`}
if (video && currentVideo) { className="absolute inset-0 w-full h-full"
const videoSrc = `https://vz-b9208a4c-8c8.b-cdn.net/${currentVideo.id}/playlist.m3u8`; frameBorder="0"
allowFullScreen
if (Hls.isSupported()) { allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
const hls = new Hls(); onLoad={handleVideoPlay}
hls.loadSource(videoSrc); title={currentVideo.title}
hls.attachMedia(video); referrerPolicy="origin"
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> </div>