Use a standard video player with signed URLs to play videos on the platform
Refactor video playback to use <video> tag with HLS.js and signed URLs for secure Bunny.net streaming. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/bwzbqEX
This commit is contained in:
@@ -180,15 +180,30 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
|
||||
</Button>
|
||||
|
||||
<div className="relative bg-black rounded-lg overflow-hidden">
|
||||
<iframe
|
||||
src={video.videoUrlIframe || `https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID}/${video.id}`}
|
||||
className="w-full h-auto max-h-[80vh] aspect-video"
|
||||
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen"
|
||||
allowFullScreen
|
||||
onLoad={handleVideoPlay}
|
||||
data-testid="video-iframe"
|
||||
title={video.title}
|
||||
/>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-auto max-h-[80vh]"
|
||||
controls
|
||||
preload="metadata"
|
||||
onPlay={handleVideoPlay}
|
||||
data-testid="video-player"
|
||||
crossOrigin="anonymous"
|
||||
>
|
||||
<source src={video.videoUrl} type="application/x-mpegURL" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
{/* Fallback button for iframe if HLS fails */}
|
||||
<div className="absolute top-4 right-4">
|
||||
<Button
|
||||
onClick={() => window.open(video.videoUrlIframe, '_blank')}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
data-testid="button-iframe-fallback"
|
||||
>
|
||||
Open in Bunny Player
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
|
||||
<h3
|
||||
|
||||
Reference in New Issue
Block a user