fix: video display:none → visible 1px, add load() trigger, canplay event
This commit is contained in:
@@ -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 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user