Integrate Bunny.net iframe player for video playback
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:
parent
eb29cb0b7e
commit
b744eb1bf5
@ -255,30 +255,17 @@ 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 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">
|
||||
<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"
|
||||
<iframe
|
||||
src={`https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID || "384105"}/${currentVideo.id}?preroll=false&postroll=false&ads=false`}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
frameBorder="0"
|
||||
allowFullScreen
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
onLoad={handleVideoPlay}
|
||||
title={currentVideo.title}
|
||||
referrerPolicy="origin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user