Fix video not playing - add multiple event listeners and fallback
All checks were successful
build-website / build (push) Successful in 1m34s
All checks were successful
build-website / build (push) Successful in 1m34s
- Add loadeddata and play events in addition to canplaythrough - Add fallback timeout to ensure video becomes visible after 1.5s - This ensures video will display even if autoplay events don't fire properly
This commit is contained in:
@@ -11,7 +11,9 @@
|
||||
poster="/golden_gate.jpg"
|
||||
class="hero-video"
|
||||
:class="{ 'video-loaded': videoLoaded }"
|
||||
@loadeddata="handleVideoLoaded"
|
||||
@canplaythrough="handleVideoLoaded"
|
||||
@play="handleVideoLoaded"
|
||||
>
|
||||
<source
|
||||
src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
|
||||
@@ -164,6 +166,13 @@ onMounted(() => {
|
||||
handleVideoVisibility()
|
||||
initSmoothScroll()
|
||||
animateCount()
|
||||
|
||||
// Fallback: ensure video becomes visible after a delay
|
||||
setTimeout(() => {
|
||||
if (!videoLoaded.value) {
|
||||
videoLoaded.value = true
|
||||
}
|
||||
}, 1500)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user