zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

fix: ensure video element is ready before playing (#871)

zio/stable
Joaquín Sánchez 2023-01-08 15:13:03 +01:00 committed by GitHub
parent e92a983947
commit f8692ed480
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/status/StatusAttachment.vue
View File

@ -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>