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

Update video player to use Video.js and HLS streaming

Browse Source 
Integrate Video.js for improved video playback and switch to HLS streaming from Bunny.net CDN. Update server storage to reflect new video URL format for HLS compatibility.

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/M1DfQp9
This commit is contained in:
sebastjanartic 2025-08-28 17:36:25 +00:00
parent 9a13f7a813
commit ece04e8891
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,17 +254,19 @@ 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 Bunny.net iframe */} {/* Video player using Video.js */}
<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">
<iframe <video
src={`https://iframe.mediadelivery.net/embed/384105/${currentVideo.id}?autoplay=false&preroll=false&responsive=true`} controls
className="absolute inset-0 w-full h-full" className="absolute inset-0 w-full h-full"
frameBorder="0" onPlay={handleVideoPlay}
allowFullScreen preload="metadata"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" data-testid="video-player"
onLoad={handleVideoPlay} >
title={currentVideo.title} <source src={`https://vz-b9208a4c-8c8.b-cdn.net/${currentVideo.id}/playlist.m3u8`} type="application/x-mpegURL" />
/> <source src={`https://vz-b9208a4c-8c8.b-cdn.net/${currentVideo.id}/play_720p.mp4`} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div> </div>
{/* Video info */} {/* Video info */}

4
server/storage.ts
View File

@ -79,7 +79,7 @@ export class DatabaseStorage implements IStorage {
title: row.title, title: row.title,
description: row.description, description: row.description,
thumbnailUrl: row.thumbnail_url, thumbnailUrl: row.thumbnail_url,
videoUrl: `https://iframe.mediadelivery.net/embed/384105/${row.id}`, // Bunny.net iframe embed videoUrl: `https://vz-b9208a4c-8c8.b-cdn.net/${row.id}/playlist.m3u8`, // HLS stream URL
duration: row.duration, duration: row.duration,
views: row.views, views: row.views,
category: row.category, category: row.category,
@ -110,7 +110,7 @@ export class DatabaseStorage implements IStorage {
title: row.title, title: row.title,
description: row.description, description: row.description,
thumbnailUrl: row.thumbnail_url, thumbnailUrl: row.thumbnail_url,
videoUrl: `https://iframe.mediadelivery.net/embed/384105/${row.id}`, // Bunny.net iframe embed videoUrl: `https://vz-b9208a4c-8c8.b-cdn.net/${row.id}/playlist.m3u8`, // HLS stream URL
duration: row.duration, duration: row.duration,
views: row.views, views: row.views,
category: row.category, category: row.category,