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

Improve video playback experience with smoother transitions and better loading

Browse Source 
Update VideoPage component in client/src/pages/VideoPage.tsx to enhance video loading by adding a black background overlay and gradually fading in the iframe content with a 500ms delay after the video is ready, ensuring a smoother visual experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
This commit is contained in:
sebastjanartic 2025-08-30 23:03:10 +00:00
parent b948699373
commit 17186275f6
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -433,15 +433,23 @@ export default function VideoPage() {
</> </>
)} )}
{currentVideo.videoUrlIframe ? ( {currentVideo.videoUrlIframe ? (
<iframe <div className="relative w-full h-full">
src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1&poster=0`} <iframe
className="absolute inset-0 w-full h-full" src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
frameBorder="0" className="absolute inset-0 w-full h-full opacity-0"
allowFullScreen frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen
onLoad={handleVideoPlay} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
title={currentVideo.title} onLoad={(e) => {
/> setTimeout(() => {
e.currentTarget.style.opacity = '1';
}, 500);
handleVideoPlay();
}}
title={currentVideo.title}
/>
<div className="absolute inset-0 bg-black"></div>
</div>
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center text-white"> <div className="absolute inset-0 flex items-center justify-center text-white">
<p>Video nicht verfügbar</p> <p>Video nicht verfügbar</p>