fix: video display:none → visible 1px, add load() trigger, canplay event

This commit is contained in:
2026-07-30 22:55:57 +03:00
parent a33658f0ee
commit 9fd1873cc5
+20 -9
View File
@@ -75,19 +75,30 @@ export default function CloudRevealSection() {
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
if (!ctx) return if (!ctx) return
const drawVideoFrame = () => { const draw = () => {
if (canvas.width === 0) {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
if (video.readyState >= 2) { if (video.readyState >= 2) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height) ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
} }
} }
video.addEventListener('seeked', drawVideoFrame) const onReady = () => { setLoaded(true); draw() }
video.addEventListener('loadeddata', () => {
setLoaded(true)
drawVideoFrame()
})
return () => video.removeEventListener('seeked', drawVideoFrame) video.addEventListener('seeked', draw)
video.addEventListener('loadeddata', onReady)
video.addEventListener('canplay', onReady)
// Yüklemeyi tetikle
video.load()
return () => {
video.removeEventListener('seeked', draw)
video.removeEventListener('loadeddata', onReady)
video.removeEventListener('canplay', onReady)
}
}, [prefersReducedMotion]) }, [prefersReducedMotion])
// Scroll → video currentTime // Scroll → video currentTime
@@ -142,14 +153,14 @@ export default function CloudRevealSection() {
<div ref={sectionRef} style={{ height: '500vh' }}> <div ref={sectionRef} style={{ height: '500vh' }}>
<div className="sticky top-0 min-h-[100dvh] w-full overflow-hidden bg-black"> <div className="sticky top-0 min-h-[100dvh] w-full overflow-hidden bg-black">
{/* Gizli video — sadece canvas'a kaynak */} {/* Video kaynağı — görünmez ama yüklenebilir */}
<video <video
ref={videoRef} ref={videoRef}
src={HERO_VIDEO} src={HERO_VIDEO}
preload="auto" preload="auto"
muted muted
playsInline playsInline
className="hidden" style={{ position: 'absolute', width: 1, height: 1, opacity: 0, pointerEvents: 'none' }}
/> />
{/* Canvas */} {/* Canvas */}