1

I have a slider in my craft website where images are showing as item. When I hover on image it will display none and video will play. There are lots of video files. So when i refresh the page then it is taking time for loading because of video files. Any idea how can i fetch video from server when hover on image ?

1 Answer 1

0
document.querySelectorAll('.my-video').forEach(video => {
  video.addEventListener("mouseenter", function () {
    video.play();
  })
  video.addEventListener("mouseleave", function () {
    video.pause();
  })
})

You also need to add lazy loading, you can go 2 ways, but firstly change video attribute "preload" to "none"(<video preload="none"...) and then

  1. Load video on hover

    video.removeAttribute("preload")

  2. Or make via Intersection Observer (as soon as you scroll to the container with the video, it loads)

1
  • The first approach is satisfying my requirement. Thanks Commented Sep 7, 2022 at 7:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.