Javascript鼠标悬停播放视频(多个视频)

Question

当我将鼠标悬停在视频上时，我有以下JavaScript代码可以很好地工作。我喜欢如何开始和停止被分解成功能，它允许我自定义悬停播放我想要的方式。然而，这段代码只适用于页面上的第一个视频，我有几个视频是动态加载到页面上的。

我想修改这个代码，使它将在页面上的所有视频工作。我在想，也许函数需要在循环中调用?我不确定，因为我不知道JavaScript很好，所以任何关于如何修改这段代码的帮助将非常感激!

const video = document.querySelector("video");
function startPreview() {
video.muted = true;
video.currentTime = 5;
video.playbackRate = 2.5;
video.play();
}
function stopPreview() {
video.currentTime = 5;
video.playbackRate = 1;
video.pause();
}
let previewTimeout = null;

video.addEventListener("mouseenter", () => {
startPreview();
previewTimeout = setTimeout(stopPreview, 3000);
});
video.addEventListener("mouseleave", () => {
clearTimeout(previewTimeout);
previewTimeout = null;
stopPreview();
});

Answer 1

你可以做事件委派来处理所有的视频。所以:

document.body.addEventListener('mouseenter', (event) => {
if (event.target.matches('video') {
// start playing
}
});

更多关于MDN上的matches()方法。

您还可以修改start和stop方法，将video元素作为参数:

function startPreview(video) {
video.muted = true;
video.currentTime = 5;
video.playbackRate = 2.5;
video.play();
}

把event.target递给他们。