Javascript Mouseevent On Hover-CodePudding

Currently I am looking for some help with my mouse over event.

<div >
<video id="my_video" loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

Above is my video-container, on my index page I am displaying 10 videos. Each of them should show a preview of the video when being hovered, however with my current javascript only the first video with my_video id is displaying the video preview when hovering.

let myVideo = document.getElementById("my_video");
myVideo.addEventListener("mouseover", () => {
    myVideo.play()
    image.style.display = 'none'
});

myVideo.addEventListener("mouseleave", () => {
    myVideo.pause();
});

How can I make it so that all videos on my homepage, behave in the same manner?

CodePudding user response：

Since you do the getElementById, it only covers one element. And ID must be unique to elements in HTML, you cannot have multiple elements with same ID. You can give all of the video elements the same class and apply all of them at once, or just apply to all video elements directly

let myVideos = document.querySelectorAll("video");
myVideos.forEach(vid => {
  vid.addEventListener("mouseover", () => {
    vid.play();
  });
  vid.addEventListener("mouseleave", () => {
    vid.pause();
  });
})

<div id="container">
  <video id="my_video_1" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http://www.tiverton.ri.gov/img/content/trees/home_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
<video id="my_video_2" loop muted poster="https://external-content.duckduckgo.com/iu/?u=http://www.tiverton.ri.gov/img/content/trees/home_tree.png&f=1&nofb=1&ipt=c0fbdc7aa01163cdffb57908bb424286af2ebd3b6352a581d61660f31a299a51&ipo=images"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

CodePudding user response：

You have multiple elements with the same ID. This is your problem, ID's must be unique.

You want something like this

Note you also should not use fat arrow functions for event listeners

//Get the video elements we want
let videos = document.querySelectorAll(".video-container video");

//Loop the elements
videos.forEach((el) => {
  //Add the event listeners
  el.addEventListener("mouseover", function() {
    console.log("Play "   this.querySelector("source").src);
    this.play();
  });

  el.addEventListener("mouseleave", function() {
    console.log("Pause "   this.querySelector("source").src);
    this.pause();
  });

});

<div >
  <video loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL" type="video/mp4"> <!-- path to your video here -->
</video>
</div>
<div >
  <video loop muted poster="IMAGE_URL"> <!-- put your image here -->
  <source src="VIDEO_URL2" type="video/mp4"> <!-- path to your video here -->
</video>
</div>