fix: ensure video element is ready before playing (#871)
parent
e92a983947
commit
f8692ed480
|
@ -65,14 +65,23 @@ const video = ref<HTMLVideoElement | undefined>()
|
||||||
const prefersReducedMotion = usePreferredReducedMotion()
|
const prefersReducedMotion = usePreferredReducedMotion()
|
||||||
|
|
||||||
useIntersectionObserver(video, (entries) => {
|
useIntersectionObserver(video, (entries) => {
|
||||||
if (prefersReducedMotion.value === 'reduce')
|
const ready = video.value?.dataset.ready === 'true'
|
||||||
|
if (prefersReducedMotion.value === 'reduce') {
|
||||||
|
if (ready && !video.value?.paused)
|
||||||
|
video.value?.pause()
|
||||||
|
|
||||||
return
|
return
|
||||||
|
}
|
||||||
|
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
if (entry.intersectionRatio <= 0.75)
|
if (entry.intersectionRatio <= 0.75) {
|
||||||
!video.value!.paused && video.value!.pause()
|
ready && !video.value?.paused && video.value?.pause()
|
||||||
else
|
}
|
||||||
video.value!.play()
|
else {
|
||||||
|
video.value?.play().then(() => {
|
||||||
|
video.value!.dataset.ready = 'true'
|
||||||
|
}).catch(noop)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}, { threshold: 0.75 })
|
}, { threshold: 0.75 })
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue